import { Button } from './ui/button';
import { Card } from './ui/card';
import { Badge } from './ui/badge';
import { currency } from '../lib/format';
import { Product } from '../types';
import { Package, AlertCircle } from 'lucide-react';

export const ProductList = ({
  products,
  onAdd,
}: {
  products: Product[];
  onAdd?: (id: string) => void;
}) => (
  <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-6">
    {[...products].sort((a, b) => b.price - a.price).map((p) => {
      const lowStock = p.stock <= 3;
      return (
        <Card key={p.id} className="relative overflow-hidden border-none glass-card rounded-2xl sm:rounded-[2rem] group hover:shadow-2xl transition-all duration-300 flex flex-col">
          <div className="aspect-square bg-slate-50 flex items-center justify-center p-4 sm:p-8 group-hover:bg-indigo-50 transition-colors">
            <Package size={48} className="text-slate-200 group-hover:text-indigo-200 transition-all group-hover:scale-110 duration-500" />
            
            {lowStock && (
              <div className="absolute top-2 left-2 sm:top-4 sm:left-4">
                <Badge color="indigo" variant="solid" className="text-[8px] sm:text-[9px] px-1.5 sm:px-2 py-0.5 font-black uppercase tracking-widest shadow-lg animate-pulse">
                  Últimas
                </Badge>
              </div>
            )}
          </div>

          <div className="p-3 sm:p-5 flex-1 flex flex-col gap-3 sm:gap-4">
            <div className="space-y-1">
              <h3 className="font-black text-slate-900 text-sm sm:text-base tracking-tight leading-tight group-hover:text-indigo-600 transition-colors uppercase italic truncate">{p.name}</h3>
              <div className="text-[10px] sm:text-xs font-bold text-slate-400 uppercase tracking-widest">
                {p.stock} em stock
              </div>
            </div>

            <div className="mt-auto pt-3 sm:pt-4 border-t border-slate-50 flex flex-col gap-2 sm:gap-3">
              <div className="text-lg sm:text-xl font-black text-slate-900 tracking-tighter">
                {currency(p.price)}
              </div>
              
              {onAdd && (
                <Button 
                  onClick={() => onAdd(p.id)} 
                  disabled={p.stock <= 0} 
                  className="w-full h-9 sm:h-10 bg-slate-900 hover:bg-slate-800 text-indigo-400 font-black rounded-xl shadow-lg shadow-slate-200 transition-all active:scale-95 uppercase tracking-wider sm:tracking-widest text-[9px] sm:text-[10px]"
                >
                  {p.stock > 0 ? 'Adicionar' : 'Esgotado'}
                </Button>
              )}
            </div>
          </div>
        </Card>
      );
    })}
  </div>
);
