import Link from 'next/link';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from './ui/button';
import type { Category } from '@/lib/types';
import { ArrowRight } from 'lucide-react';
import Image from 'next/image';
import { Skeleton } from './ui/skeleton';

interface FeaturedCategoriesProps {
  categories: Category[];
  isLoading?: boolean;
}

export default function FeaturedCategories({ categories, isLoading = false }: FeaturedCategoriesProps) {
  return (
    <section>
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-2xl font-bold font-headline text-primary">Featured Categories</h2>
        <Button variant="link" asChild className='text-accent'>
            <Link href="/categories">View All <ArrowRight className="ml-2 h-4 w-4" /></Link>
        </Button>
      </div>
      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
        {isLoading ? (
            [...Array(4)].map((_, i) => <Skeleton key={i} className="h-32 w-full" />)
        ) : (
            categories.map((category) => (
            <Link href={`/categories/${category.name.toLowerCase()}`} key={category.id} className="group">
                <Card className="relative h-32 overflow-hidden rounded-lg transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg">
                    <Image
                        src={category.imageUrl}
                        alt={category.name}
                        fill
                        className="object-cover transition-transform duration-300 group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-black/50" />
                    <CardContent className="relative flex h-full items-center justify-center p-4 text-center">
                        <h3 className="text-lg font-bold text-white">{category.name}</h3>
                    </CardContent>
                </Card>
            </Link>
            ))
        )}
      </div>
    </section>
  );
}