import { Button } from './ui/button';
import { Card } from './ui/card';
import { currency } from '../lib/format';
import { Service } from '../types';
import { Clock } from 'lucide-react';

export const ServiceList = ({
  services,
  onSelect,
}: {
  services: Service[];
  onSelect?: (id: string) => void;
}) => (
  <div className="grid md:grid-cols-2 gap-4 sm:gap-6">
    {services.map((s) => (
      <Card key={s.id} className="p-3 sm:p-6 border-none glass-card rounded-xl sm:rounded-[2rem] group hover:shadow-2xl transition-all duration-300 overflow-hidden">
        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-1.5 sm:gap-4">
          <div className="flex-1 min-w-0 space-y-1">
            <h3 className="font-black text-slate-900 text-base sm:text-xl tracking-tight leading-tight group-hover:text-indigo-600 transition-colors uppercase italic">{s.name}</h3>
            <div className="flex items-center gap-2">
              <div className="flex items-center gap-1 px-1.5 py-0.5 bg-slate-100 rounded-md text-[10px] font-bold text-slate-500 uppercase">
                <Clock size={10} />
                <span>{s.duration} min</span>
              </div>
            </div>
          </div>
          <div className="text-lg sm:text-2xl font-black text-slate-900 tracking-tighter bg-indigo-50 px-2 py-0.5 rounded-lg border border-indigo-100 whitespace-nowrap shrink-0 w-fit">
            {currency(s.price)}
          </div>
        </div>
        
        {onSelect && (
          <div className="mt-3 sm:mt-6 pt-3 sm:pt-6 border-t border-slate-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4">
            <p className="text-[10px] font-medium text-slate-400 shrink-0">Lugar disponível hoje</p>
            <Button 
              onClick={() => onSelect(s.id)} 
              className="w-full sm:w-auto h-9 sm:h-11 bg-slate-900 hover:bg-slate-800 text-indigo-400 font-black rounded-lg shadow-lg shadow-slate-200 transition-all active:scale-95 uppercase tracking-tight sm:tracking-widest text-[11px] sm:text-xs px-4"
            >
              Reservar
            </Button>
          </div>
        )}
      </Card>
    ))}
  </div>
);

