import { Link } from 'react-router-dom';
import { Star, MapPin, Scissors, User } from 'lucide-react';
import { BarberShop } from '../types';
import { Card } from './ui/card';
import { Button } from './ui/button';

export const ShopCard = ({ shop }: { shop: BarberShop }) => {
  return (
    <Card className="overflow-hidden border-none glass-card rounded-2xl sm:rounded-[2.5rem] group hover:shadow-2xl hover:shadow-slate-200/60 transition-all duration-500">
      <div className="relative h-36 sm:h-44 overflow-hidden">
        {shop.imageUrl ? (
          <img 
            src={shop.imageUrl} 
            alt={shop.name} 
            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" 
          />
        ) : (
          <div className="w-full h-full bg-slate-900 flex items-center justify-center text-indigo-400">
            <Scissors size={40} />
          </div>
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity" />
        
        {/* Rating Badge */}
        <div className="absolute top-3 right-3 sm:top-4 sm:right-4 bg-slate-900/90 backdrop-blur-md border border-white/10 px-2 sm:px-3 py-1 rounded-full flex items-center gap-1.5 shadow-xl">
          <Star size={12} className="fill-indigo-500 text-indigo-500" />
          <span className="text-white text-[10px] sm:text-xs font-black tracking-wider">
            {shop.rating ? shop.rating.toFixed(1) : '0.0'}
          </span>
        </div>
      </div>

      <div className="p-4 sm:p-6 space-y-3 sm:space-y-4">
        <div>
          <h2 className="text-slate-900 text-lg sm:text-xl font-black tracking-tight group-hover:text-indigo-600 transition-colors truncate">
            {shop.name}
          </h2>
          <div className="flex items-center gap-1.5 text-slate-500 mt-1">
            <MapPin size={14} className="text-indigo-600 shrink-0" />
            <p className="text-sm font-medium line-clamp-1">
              {shop.address || 'Endereço Indisponível'}
            </p>
          </div>
        </div>

        <div className="flex items-center justify-between pt-2 gap-2">
          <div className="flex items-center gap-2 sm:gap-3 min-w-0">
            <div className="flex -space-x-2 shrink-0">
              {[1, 2, 3].map(i => (
                <div key={i} className="w-6 h-6 sm:w-7 sm:h-7 rounded-full border-2 border-white bg-slate-100 flex items-center justify-center overflow-hidden">
                   <User size={10} className="text-slate-400" />
                </div>
              ))}
            </div>
            <span className="text-[10px] sm:text-xs font-bold text-slate-400 uppercase tracking-wider sm:tracking-widest truncate">
              +{(shop.barbers || []).length} Barbeiros
            </span>
          </div>
          
          <Button asChild className="rounded-xl bg-slate-900 hover:bg-slate-800 text-indigo-400 font-bold px-3 sm:px-5 h-9 sm:h-10 shadow-lg shadow-slate-200 transition-all active:scale-95 text-xs sm:text-sm shrink-0">
            <Link to={`/barbearia/${shop.id}`}>Reservar</Link>
          </Button>
        </div>
      </div>
    </Card>
  );
};
