'use client';

import type { Business } from "@/lib/types";
import { Skeleton } from "./ui/skeleton";
import BusinessCard from "./business-card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

interface FeaturedBusinessesProps {
    businesses: Business[];
    isLoading: boolean;
}

export default function FeaturedBusinesses({ businesses, isLoading }: FeaturedBusinessesProps) {
    if (isLoading) {
        return (
            <section>
                <div className="mb-4">
                    <Skeleton className="h-8 w-64" />
                </div>
                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                    {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-80 w-full" />)}
                </div>
            </section>
        );
    }
    
    if (businesses.length === 0) {
        return null;
    }

    return (
        <section>
            <h2 className="text-2xl font-bold font-headline text-primary mb-4">Featured Businesses</h2>
            <Carousel
                opts={{
                    align: "start",
                    loop: businesses.length > 3
                }}
                className="w-full"
            >
                <CarouselContent>
                    {businesses.map((business) => (
                        <CarouselItem key={business.id} className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4">
                            <div className="p-1 h-full">
                                <BusinessCard business={business} isFeatured />
                            </div>
                        </CarouselItem>
                    ))}
                </CarouselContent>
                <CarouselPrevious className="ml-12" />
                <CarouselNext className="mr-12"/>
            </Carousel>
        </section>
    );
}