"use client";

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";
import { Card } from "@/components/ui/card";

interface CityCardProps {
  slug: string;
  nameZh: string;
  nameEn: string;
  tagline: string;
  imageUrl: string;
  venueCount: number;
  index?: number;
}

export function CityCard({
  slug,
  nameZh,
  nameEn,
  tagline,
  imageUrl,
  venueCount,
  index = 0,
}: CityCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
    >
      <Link href={`/explore?city=${slug}`}>
        <Card className="group relative overflow-hidden border-border bg-card transition-all hover:border-primary/40">
          <div className="relative aspect-[3/4] sm:aspect-[4/5]">
            <Image
              src={imageUrl}
              alt={nameZh}
              fill
              className="object-cover transition-transform duration-700 group-hover:scale-110"
              sizes="(max-width: 768px) 100vw, 33vw"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent" />
            <div className="absolute bottom-0 left-0 right-0 p-5">
              <p className="text-xs text-primary">{nameEn}</p>
              <h3 className="text-2xl font-bold">{nameZh}</h3>
              <p className="mt-1 text-sm text-white/80">{tagline}</p>
              <div className="mt-3 flex items-center justify-between">
                <span className="text-xs text-white/60">
                  {venueCount} 個精選場地
                </span>
                <span className="flex items-center gap-1 text-sm text-primary transition-transform group-hover:translate-x-1">
                  探索
                  <ArrowRight className="size-4" />
                </span>
              </div>
            </div>
          </div>
        </Card>
      </Link>
    </motion.div>
  );
}