fasto/components/ProductLists.tsx

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 p-6 rounded-2xl shadow-sm border border-slate-100 flex-1">
      <div className="flex items-center gap-2 mb-4">
        <div className={`p-2 rounded-lg ${color === 'blue' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'}`}>
          <Icon size={18} />
        </div>
        <h3 className="font-bold text-slate-800">{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-slate-800 text-white' : 'bg-slate-100 text-slate-500'}`}>
                {idx + 1}
              </span>
              <span className="text-sm font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
            </div>
            <div className="text-right">
              <span className="text-sm font-bold text-slate-900 block">{item.count}</span>
              <span className="text-[10px] text-slate-400">{item.percentage}%</span>
            </div>
          </li>
        ))}
        {data.length === 0 && <li className="text-sm text-slate-400 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>
  );
};