"use client";

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { MapPin, Star } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import type { VenueCardData } from "@/lib/types";

interface VenueCardProps {
  venue: VenueCardData;
  index?: number;
}

export function VenueCard({ venue, index = 0 }: VenueCardProps) {
  const image = venue.images[0] || "/images/placeholder.jpg";

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.4, delay: index * 0.05 }}
    >
      <Card className="group overflow-hidden border-border bg-card transition-all hover:border-primary/40 hover:glow-gold">
        <div className="relative aspect-[4/3] overflow-hidden">
          <Image
            src={image}
            alt={venue.nameZh}
            fill
            className="object-cover transition-transform duration-500 group-hover:scale-105"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
          <div className="absolute bottom-3 left-3 flex gap-2">
            <Badge className="bg-primary/90 text-primary-foreground">
              {venue.type}
            </Badge>
            {venue.featured && (
              <Badge variant="outline" className="border-neon/50 text-neon">
                精選
              </Badge>
            )}
          </div>
        </div>
        <CardContent className="p-4">
          <div className="flex items-start justify-between gap-2">
            <div>
              <h3 className="font-semibold leading-tight">{venue.nameZh}</h3>
              {venue.nameEn && (
                <p className="text-xs text-muted-foreground">{venue.nameEn}</p>
              )}
            </div>
            {venue.rating && (
              <div className="flex items-center gap-1 text-sm text-primary">
                <Star className="size-3.5 fill-primary" />
                {venue.rating.toFixed(1)}
              </div>
            )}
          </div>
          <div className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
            <MapPin className="size-3" />
            {venue.city.nameZh}
          </div>
          <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">
            {venue.description}
          </p>
          <div className="mt-3 flex items-center justify-between">
            <span className="text-sm font-medium text-primary">
              {venue.priceRange}
            </span>
            <Button
              render={<Link href={`/venue/${venue.slug}`} />}
              nativeButton={false}
              size="sm"
              variant="outline"
            >
              查看詳情
            </Button>
          </div>
        </CardContent>
      </Card>
    </motion.div>
  );
}