'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {STORE_PERFORMANCE_DATA} from '../../services/commerceService';

export function StorePerformanceChart() {
  const maxRevenue = Math.max(...STORE_PERFORMANCE_DATA.map((s) => s.Revenue)) || 1;

  return (
    <div className="rounded-xl border border-border bg-card p-5 space-y-4 shadow-sm overflow-hidden">
      <div>
        <Heading level={4} className="text-base font-bold text-white">
          Top Performing Outlets
        </Heading>
        <Text size="sm" color="secondary">
          Store revenue comparison across your network
        </Text>
      </div>

      <div className="space-y-3 pt-1">
        {STORE_PERFORMANCE_DATA.map((store) => {
          const widthPercent = (store.Revenue / maxRevenue) * 100;
          return (
            <div key={store.store} className="space-y-1">
              <div className="flex justify-between items-center text-xs font-semibold">
                <span className="text-white font-bold">{store.store}</span>
                <span className="text-emerald-400 font-bold tabular-nums">
                  ₹{(store.Revenue / 100000).toFixed(1)}L
                </span>
              </div>
              <div className="h-6 w-full rounded-md bg-zinc-900/80 p-0.5 border border-zinc-800">
                <div
                  className="h-full rounded bg-gradient-to-r from-emerald-600 to-emerald-400 transition-all duration-500"
                  style={{width: `${widthPercent}%`}}
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
