import React, { useState } from 'react';
import { ShoppingBag, TrendingUp } from 'lucide-react';

interface ProductStat {
  name: string;
  count: number;
  percentage: number;
}

interface ProductListsProps {
  requested: ProductStat[];
  sold: ProductStat[];
}

export const ProductLists: React.FC<ProductListsProps> = ({ requested, sold }) => {
  const ListSection = ({ title, icon: Icon, data, color }: { title: string, icon: any, data: ProductStat[], color: string }) => (
    <div className="bg-white dark:bg-dark-card p-6 rounded-2xl shadow-sm border border-zinc-100 dark:border-dark-border flex-1 transition-colors">
      <div className="flex items-center gap-2 mb-4">
        <div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400' : 'bg-green-100 dark:bg-green-950/50 text-green-600 dark:text-green-400'}`}>
          <Icon size={18} />
        </div>
        <h3 className="font-bold text-zinc-800 dark:text-dark-text">{title}</h3>
      </div>
      <ul className="space-y-4">
        {data.map((item, idx) => (
          <li key={idx} className="flex items-center justify-between group">
            <div className="flex items-center gap-3">
              <span className={`flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${idx < 3 ? 'bg-zinc-800 dark:bg-brand-yellow text-white dark:text-zinc-950' : 'bg-zinc-100 dark:bg-dark-bg text-zinc-500 dark:text-dark-muted'}`}>
                {idx + 1}
              </span>
              <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-dark-text">{item.name}</span>
            </div>
            <div className="text-right">
              <span className="text-sm font-bold text-zinc-900 dark:text-zinc-100 block">{item.count}</span>
              <span className="text-[10px] text-zinc-400 dark:text-dark-muted">{item.percentage}%</span>
            </div>
          </li>
        ))}
        {data.length === 0 && <li className="text-sm text-zinc-400 dark:text-dark-muted italic">Nenhum dado disponível.</li>}
      </ul>
    </div>
  );

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <ListSection 
        title="Produtos Mais Solicitados" 
        icon={ShoppingBag} 
        data={requested} 
        color="blue" 
      />
      <ListSection 
        title="Produtos Mais Vendidos" 
        icon={TrendingUp} 
        data={sold} 
        color="green" 
      />
    </div>
  );
};