// Story 7.3: Featured creators section component
'use client';

import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { FeaturedCreatorCard } from './featured-creator-card';
import type { FeaturedCreator } from '../types/discovery.types';

interface FeaturedCreatorsSectionProps {
  creators: FeaturedCreator[];
  isLoading?: boolean;
}

export function FeaturedCreatorsSection({ creators, isLoading = false }: FeaturedCreatorsSectionProps) {
  if (isLoading) {
    return (
      <section className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold">Featured Creators</h2>
        </div>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
          {[...Array(10)].map((_, i) => (
            <div key={i} className="space-y-3">
              <div className="aspect-square rounded-lg bg-muted animate-pulse" />
              <div className="space-y-2">
                <div className="h-4 bg-muted rounded animate-pulse" />
                <div className="h-3 bg-muted rounded w-2/3 animate-pulse" />
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  if (creators.length === 0) {
    return (
      <section className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold">Featured Creators</h2>
        </div>
        <div className="text-center py-12 text-muted-foreground">
          <p>No featured creators available at this time.</p>
          <p className="text-sm mt-2">Check back soon for new creators!</p>
        </div>
      </section>
    );
  }

  return (
    <section className="space-y-6">
      {/* Section header */}
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold">Featured Creators</h2>
        <Link
          href="/creators"
          className="flex items-center gap-1 text-sm text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded"
        >
          View All Creators
          <ArrowRight className="h-4 w-4" />
        </Link>
      </div>

      {/* Creator grid - responsive layout with mobile carousel */}
      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5 md:overflow-x-visible overflow-x-auto snap-x snap-mandatory scrollbar-hide">
        {creators.map((creator, index) => (
          <div key={creator.id} className="snap-start">
            <FeaturedCreatorCard
              creator={creator}
              priority={index < 5} // Prioritize first 5 for LCP
            />
          </div>
        ))}
      </div>

      {/* Mobile carousel hint */}
      <div className="md:hidden text-center text-xs text-muted-foreground mt-2">
        Swipe to see more creators
      </div>
    </section>
  );
}