import React from "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";
import ProfileCardItem from "../profiledashboard/ProfileCardItem";
import CakeIcon from "@mui/icons-material/Cake";
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import GroupsIcon from "@mui/icons-material/Groups";
import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";


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,
    },
  ];

  const buildProfileRows = (profile) => [
    [
      {
        icon: <CakeIcon className="w-4 h-4 text-gray-700" />,
        text: profile?.age || "-",
      },
      {
        icon: <AccessibilityNewIcon className="w-4 h-4 text-gray-700" />,
        text: profile?.height || "-",
      },
    ],
    [
      {
        icon: <AccountBalanceWalletIcon className="w-4 h-4 text-gray-700" />,
        text: profile?.salary ? `${profile.salary} LPA` : "-",
      },
      {
        icon: <LocationOnIcon className="w-4 h-4 text-gray-700" />,
        text: profile?.location || "-",
      },
    ],
    [
      {
        icon: <GroupsIcon className="w-4 h-4 text-gray-700" />,
        text: profile?.caste || "-",
      },
      {
        icon: <AutoAwesomeIcon className="w-4 h-4 text-gray-700" />,
        text: profile?.zodiac1 || "-",
      },
    ],
    [
      {
        icon: <AutoAwesomeIcon className="w-4 h-4 text-gray-700" />,
        text: profile?.zodiac2 || "-",
      },
    ],
  ];

  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) => (
            <ProfileCardItem
              key={profile.id}
              profile={profile}
              metaRows={buildProfileRows(profile)}
            />
          ))}
        </div>
      </div>
    </div>
  );

}
