thirukalyanamweb/src/components/ui/ProfileCardDemo.jsx

import React from "react";
import { Heart, X, Crown, Bookmark, Eye } from "lucide-react";
// Import your images
import Profile1 from "../../assets/images/bride1.jpg";
import Profile2 from "../../assets/images/bride2.jpg";
import Profile3 from "../../assets/images/bride3.jpg";
import Profile4 from "../../assets/images/bride4.jpg";
import { motion } from "framer-motion";


export default function ProfileCard() {
  // Sample data for multiple cards with image paths
  const profiles = [
    {
      id: 1,
      name: "Jerome Bell",
      idNumber: "KI2847596",
      lastSeen: "4 Nov 2025",
      salary: "5-10",
      age: "22 yrs",
      height: "5'2\"",
      location: "Chennai",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      image: Profile1,
    },
    {
      id: 2,
      name: "Neha Singh",
      idNumber: "KI2847597",
      lastSeen: "5 Nov 2025",
      salary: "8-12",
      age: "26 yrs",
      height: "5'6\"",
      location: "hyderabad",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      image: Profile2,
    },
    {
      id: 3,
      name: "Priya Sharma",
      idNumber: "KI2847598",
      lastSeen: "3 Nov 2025",
      salary: "6-11",
      age: "24 yrs",
      height: "5'4\"",
      location: "Mumbai",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      image: Profile3,
    },
    {
      id: 4,
      name: "Kavya Iyer",
      idNumber: "KI2847599",
      lastSeen: "2 Nov 2025",
      salary: "7-10",
      age: "23 yrs",
      height: "5'3\"",
      location: "Bangalore",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      image: Profile4,
    },
  ];

 return (
  <div className="h-auto py-8 px-4">

    {/* HEADING */}
    <motion.div
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="text-center mb-12"
    >
      <h1 className="text-[20px] text-[#000000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
        Daily Recommended
      </h1>
      <p className="text-gray-900 text-[12px]">
        Find your perfect match today
        
      </p>
    </motion.div>

    {/* CARDS GRID */}
    <div className="flex justify-center">
      <div className="w-full max-w-[1400px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {profiles.map((profile) => (
          <div
            key={profile.id}
            className="w-full rounded-[28px] overflow-hidden bg-white shadow-md"
          >
            {/* IMAGE SECTION */}
            <div className="relative">
              <img
                src={profile.image}
                alt="profile"
                className="w-full h-[320px] object-cover"
              />

              <div className="absolute top-4 left-4 w-9 h-9 rounded-full bg-[#8b0000] flex items-center justify-center">
                <Crown size={18} color="#fff" />
              </div>

              <div className="absolute top-4 right-4 px-3 py-1.5 rounded-[20px] bg-white flex items-center gap-1.5 text-[13px] font-medium shadow-lg">
                <Bookmark size={14} /> Shortlist
              </div>
            </div>

            {/* CONTENT */}
            <div className="px-4 py-4 -mt-[60px] bg-white/65 backdrop-blur-[25px] rounded-t-[15px] shadow-[0_-10px_30px_rgba(0,0,0,0.15)] relative z-[2]">
              <h2 className="text-center text-[22px] font-semibold mb-1">
                {profile.name}
              </h2>

              <div className="flex justify-between items-center mb-2 text-[11px] text-gray-600 px-8">
                <p>ID: {profile.idNumber}</p>
                <p className="flex items-center gap-0.5">
                  <Eye size={12} /> {profile.lastSeen}
                </p>
              </div>

              <div className="flex flex-wrap justify-center gap-2">
                {[
                  profile.age,
                  profile.height,
                  profile.salary + " LPA",
                  profile.location,
                  profile.caste,
                  profile.zodiac1,
                  profile.zodiac2,
                ].map((v, i) => (
                  <span
                    key={i}
                    className="px-1.5 py-1.5 rounded-[20px] bg-white/70 border border-black/8 text-[13px]"
                  >
                    {v}
                  </span>
                ))}
              </div>

              <div className="flex gap-4 mt-[15px] justify-center">
                <button className="px-2 py-1 rounded-[20px] border border-red-200 bg-red-50 flex items-center gap-1.5 font-semibold text-red-900">
                  <X size={18} /> Decline
                </button>

                <button className="px-2 py-1 rounded-[20px] border border-green-200 bg-green-50 text-green-900 flex items-center gap-1.5 font-semibold">
                  <Heart size={18} /> Interest
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

}