"use client";

import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { SliderRow } from "@/components/ui/SliderRow";
import { TourCard } from "@/components/tour/TourCard";
import { EmptyState } from "@/components/ui/EmptyState";
import { FadeInUp, StaggerContainer, StaggerItem } from "@/components/ui/motion";

export interface TourData {
  id: number;
  title: string;
  location: string | null;
  price: string | null;
  duration: string | null;
  badge: string | null;
  imageUrl: string | null;
  excerpt?: string | null;
}

export function TourSection({ tours }: { tours: TourData[] }) {
  return (
    <section className="bg-slate-50 py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <FadeInUp className="flex flex-wrap items-end justify-between gap-4 mb-12">
          <div className="max-w-2xl">
            <p className="text-sm font-bold text-merah-ranata tracking-wider uppercase mb-3">
              PAKET TOUR UNGGULAN
            </p>
            <h2 className="text-3xl md:text-5xl font-extrabold text-slate-900 tracking-tight mb-4">
              Paket Tour Terbaik Kami
            </h2>
            <p className="text-base md:text-lg text-slate-500 leading-relaxed">
              Jelajahi berbagai pilihan paket wisata yang dirancang khusus untuk memberikan kenyamanan dan pengalaman liburan yang berkesan.
            </p>
          </div>
          <Link
            href="/tour"
            className="hidden sm:inline-flex items-center gap-2 font-bold text-merah-ranata hover:text-red-700 transition-colors group"
          >
            Lihat Semua Paket
            <ChevronRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
          </Link>
        </FadeInUp>

        <div>
          {tours.length === 0 ? (
            <EmptyState message="Belum ada paket tour." />
          ) : (
            <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {tours.map((tour) => (
                <StaggerItem key={tour.id} className="h-full">
                  <TourCard tour={tour} />
                </StaggerItem>
              ))}
            </StaggerContainer>
          )}
        </div>
        
        <div className="mt-8 text-center sm:hidden">
          <Link
            href="/tour"
            className="inline-flex items-center justify-center gap-2 w-full rounded-full border border-merah-ranata px-6 py-3 text-sm font-medium text-merah-ranata transition hover:bg-red-50"
          >
            Lihat Semua Paket
            <ChevronRight className="h-4 w-4" />
          </Link>
        </div>
      </div>
    </section>
  );
}