// app/components/admin/dashboard/TopWebsitesTable.tsx
'use client';

import { Globe } from 'lucide-react';
import { TopWebsite } from '@/types/dashboard';

interface TopWebsitesTableProps {
  websites: TopWebsite[];
}

export default function TopWebsitesTable({ websites }: TopWebsitesTableProps) {
  return (
    <div className="bg-var-surface rounded-xl shadow-var-card border border-var-border overflow-hidden">
      <div className="px-6 py-4 bg-var-primary-muted border-b border-var-border">
        <div className="flex items-center space-x-2">
          <Globe className="w-5 h-5 text-var-primary" />
          <h3 className="text-lg font-semibold text-var-text">Top Performing Websites</h3>
        </div>
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-var-border">
          <thead className="bg-var-surface-hover">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">Website</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">DA</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">Orders</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">Revenue</th>
            </tr>
          </thead>
          <tbody className="bg-var-surface divide-y divide-var-border">
            {websites.map((website) => (
              <tr key={website.id} className="hover:bg-var-surface-hover transition-colors">
                <td className="px-6 py-4">
                  <div>
                    <p className="text-sm font-medium text-var-text">{website.name}</p>
                    <p className="text-xs text-var-text-muted">{website.domain}</p>
                  </div>
                </td>
                <td className="px-6 py-4">
                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-var-primary-muted text-var-primary">
                    DA {website.da}
                  </span>
                </td>
                <td className="px-6 py-4 text-sm text-var-text-secondary">{website.total_orders}</td>
                <td className="px-6 py-4 text-sm font-semibold text-var-text">
                  ${website.total_revenue.toLocaleString()}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}