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

import { Star } from 'lucide-react';
import { TopPackage } from '@/types/dashboard';

interface TopPackagesTableProps {
  packages: TopPackage[];
}

export default function TopPackagesTable({ packages }: TopPackagesTableProps) {
  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-info-bg border-b border-var-border">
        <div className="flex items-center space-x-2">
          <Star className="w-5 h-5 text-var-accent-purple" />
          <h3 className="text-lg font-semibold text-var-text">Top Performing Packages</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">Package</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-var-text-muted uppercase">Type</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">
            {packages.map((pkg) => (
              <tr key={pkg.id} className="hover:bg-var-surface-hover transition-colors">
                <td className="px-6 py-4">
                  <div className="flex items-center space-x-2">
                    <p className="text-sm font-medium text-var-text">{pkg.name}</p>
                    {pkg.is_popular && (
                      <span className="px-2 py-0.5 text-xs font-medium bg-var-warning-bg text-var-warning rounded-full">
                        Popular
                      </span>
                    )}
                  </div>
                </td>
                <td className="px-6 py-4">
                  <span className="capitalize text-sm text-var-text-secondary">{pkg.package_type}</span>
                </td>
                <td className="px-6 py-4 text-sm text-var-text-secondary">{pkg.total_orders}</td>
                <td className="px-6 py-4 text-sm font-semibold text-var-text">
                  ${pkg.total_revenue.toLocaleString()}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}