'use client';

import { motion } from 'framer-motion';
import { Villa } from '@/data/villas';
import { Link } from '@/i18n/routing';
import { Users, Bed, Droplets, MapPin } from 'lucide-react';
import Image from 'next/image';

interface VillaCardProps {
  villa: Villa;
  index: number;
}

export default function VillaCard({ villa, index }: VillaCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6, delay: index * 0.1 }}
      className="villa-card group bg-white rounded-2xl overflow-hidden shadow-sm"
    >
      <Link href={`/villas/${villa.slug}` as any}>
        <div className="relative aspect-[4/5] overflow-hidden">
          <Image
            src={villa.images[0]}
            alt={villa.name}
            fill
            className="object-cover transition-transform duration-700 group-hover:scale-110"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
          <div className="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-[10px] font-bold tracking-widest uppercase text-aegean-dark">
            Portfolio
          </div>
          <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/60 to-transparent">
            <div className="flex items-center text-white/90 text-xs mb-1">
              <MapPin className="w-3 h-3 mr-1" />
              {villa.location}
            </div>
            <h3 className="text-2xl font-serif text-white">{villa.name}</h3>
          </div>
        </div>
      </Link>

      <div className="p-6">
        <div className="flex justify-between items-center mb-6 border-b border-aegean-dark/5 pb-4">
          <div className="flex items-center space-x-4">
            <div className="flex flex-col items-center">
              <Users className="w-4 h-4 text-salmakis-blue mb-1" />
              <span className="text-[10px] uppercase font-bold text-aegean-dark/40">{villa.capacity} Kişi</span>
            </div>
            <div className="flex flex-col items-center">
              <Bed className="w-4 h-4 text-salmakis-blue mb-1" />
              <span className="text-[10px] uppercase font-bold text-aegean-dark/40">{villa.bedrooms} Oda</span>
            </div>
            <div className="flex flex-col items-center">
              <Droplets className="w-4 h-4 text-salmakis-blue mb-1" />
              <span className="text-[10px] uppercase font-bold text-aegean-dark/40">Havuz</span>
            </div>
          </div>
          <div className="text-right">
            <span className="text-[10px] uppercase font-bold text-aegean-dark/40 block">Gecelik</span>
            <span className="text-lg font-serif font-bold text-salmakis-blue">€{villa.priceLow} - €{villa.priceHigh}</span>
          </div>
        </div>

        <Link
          href={`/villas/${villa.slug}` as any}
          className="w-full block py-3 text-center rounded-xl border border-aegean-dark/10 text-sm font-bold uppercase tracking-widest bg-aegean-dark text-white hover:bg-salmakis-blue transition-all duration-300 shadow-lg shadow-aegean-dark/10"
        >
          Detayları İncele
        </Link>
      </div>
    </motion.div>
  );
}