'use client';

import Link from 'next/link';
import Image from 'next/image';
import type { Business } from '@/lib/types';
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import StarRating from './star-rating';
import { Avatar, AvatarImage, AvatarFallback } from './ui/avatar';
import { Gem, MapPin } from 'lucide-react';
import { isBusinessOpen } from '@/lib/utils';
import { useMemo } from 'react';

interface BusinessCardProps {
  business: Business;
  isFeatured?: boolean;
}

export default function BusinessCard({ business, isFeatured = false }: BusinessCardProps) {
  const isOpen = useMemo(() => isBusinessOpen(business.openingHours), [business.openingHours]);
  const city = business.address.split(',')[1]?.trim();

  return (
    <Link href={`/businesses/${business.slug}`} className="group block h-full">
      <Card className="flex h-full flex-col overflow-hidden transition-all duration-300 ease-in-out group-hover:shadow-xl group-hover:-translate-y-1">
        <CardHeader className="relative p-0">
          <div className="relative h-28 w-full">
            <Image
              src={business.coverImageUrl}
              alt={business.name}
              fill
              className="object-cover transition-transform duration-300 group-hover:scale-105"
              data-ai-hint={business.imageHint}
            />
          </div>
          <div className="absolute right-2 top-2 flex flex-col items-end gap-2">
            {isFeatured && (
                 <Badge className="bg-accent text-accent-foreground">
                    <Gem className="mr-1 h-3 w-3" />
                    Featured
                </Badge>
            )}
            <Badge className={`${isOpen ? 'bg-green-600' : 'bg-destructive'} ${isOpen ? 'text-white' : 'text-destructive-foreground'}`}>
                {isOpen ? 'Open' : 'Closed'}
            </Badge>
          </div>
          <div className='p-4 pt-0'>
            <Avatar className="relative -mt-10 h-20 w-20 flex-shrink-0 border-4 border-card bg-background">
                <AvatarImage src={business.logoUrl} alt={`${business.name} logo`} />
                <AvatarFallback>{business.name.charAt(0)}</AvatarFallback>
            </Avatar>
          </div>
        </CardHeader>
        <CardContent className="flex-grow p-4 pt-0">
            <div className='space-y-2'>
                <h3 className="truncate text-xl font-bold leading-tight text-primary group-hover:text-accent">
                    {business.name}
                </h3>
                <div className='flex flex-wrap items-center gap-2'>
                    <Badge variant="secondary">{business.category}</Badge>
                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                        <MapPin className="h-3 w-3" />
                        <span>{city}, {business.country}</span>
                    </div>
                </div>
            </div>
            <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">{business.description}</p>
            <div className="mt-3 flex flex-wrap gap-1">
              {business.services.slice(0, 3).map(service => (
                <Badge key={service} variant="outline" className='text-xs'>{service}</Badge>
              ))}
            </div>
        </CardContent>
        <CardFooter className="flex items-center justify-between p-4 pt-0">
            <StarRating rating={business.rating} />
            <div className="text-right">
                <p className="font-bold text-primary">{business.rating.toFixed(1)}</p>
                <p className="text-xs text-muted-foreground">({business.reviewCount} reviews)</p>
            </div>
        </CardFooter>
      </Card>
    </Link>
  );
}