'use client';

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

export function TopProductsTable() {
  return (
    <div className="rounded-xl border border-border bg-card overflow-hidden shadow-sm space-y-3">
      <div className="p-4 border-b border-border bg-card">
        <Heading level={4} className="text-base font-bold text-white">
          Top Selling Products Leaderboard
        </Heading>
        <Text size="sm" color="secondary">
          Product sales volume, revenue growth and real-time inventory counts
        </Text>
      </div>

      <div className="overflow-x-auto w-full">
        <table className="w-full text-left text-sm border-collapse">
          <thead>
            <tr className="border-b border-zinc-800 bg-zinc-900/60 text-white font-bold">
              <th className="px-4 py-3 text-left">Product Name</th>
              <th className="px-4 py-3 text-left">Category</th>
              <th className="px-4 py-3 text-right">Units Sold</th>
              <th className="px-4 py-3 text-right">Total Revenue</th>
              <th className="px-4 py-3 text-right">Growth</th>
              <th className="px-4 py-3 text-center">Stock Status</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-zinc-800/60">
            {TOP_PRODUCTS_DATA.map((prod) => (
              <tr key={prod.id} className="hover:bg-white/[0.02] transition-colors">
                <td className="px-4 py-3.5 text-white font-semibold">{prod.name}</td>
                <td className="px-4 py-3.5 text-zinc-300 font-medium">{prod.category}</td>
                <td className="px-4 py-3.5 text-right text-white font-bold tabular-nums">{prod.unitsSold}</td>
                <td className="px-4 py-3.5 text-right text-white font-bold tabular-nums">{prod.revenue}</td>
                <td className="px-4 py-3.5 text-right font-bold tabular-nums">
                  <span className={prod.growthDirection === 'up' ? 'text-emerald-400' : 'text-rose-400'}>
                    {prod.growth}
                  </span>
                </td>
                <td className="px-4 py-3.5 text-center">
                  <Badge
                    variant={
                      prod.stockStatus === 'in_stock'
                        ? 'success'
                        : prod.stockStatus === 'low_stock'
                        ? 'warning'
                        : 'error'
                    }
                    label={`${prod.stockCount} left`}
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
