import React, { useState } from "react";
import { Users, Grid3x3, Heart, Crown, Bookmark } from "lucide-react";
import LazyImage from "./LazyImage";
import CakeIcon from "@mui/icons-material/Cake";
import HeightIcon from "@mui/icons-material/Height";
import GroupsIcon from "@mui/icons-material/Groups";
import TempleHinduIcon from "@mui/icons-material/TempleHindu";
import SchoolIcon from "@mui/icons-material/School";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
import { motion } from 'framer-motion';

export default function ProfileCard() {
     const [isLiked, setIsLiked] = useState(false);
  return (
    <div className=" flex items-center justify-center p-6">
      <div className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 border-green-200">
        {/* Profile Image Section */}
        <div className="relative">

             {/* Premium Badge */}
    
        <motion.div
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ delay: 0.2, type: 'spring' }}
          className="absolute top-4 left-4 z-10 bg-orange-500 rounded-full p-2 shadow-lg"
        >
          <Crown className="w-5 h-5 text-white" />
        </motion.div>
     

       {/* Shortlist Button */}
      <motion.button
        whileHover={{ scale: 1 }}
        whileTap={{ scale: 0.9 }}
        className="absolute top-4 right-4 z-10 bg-white rounded-full px-4 py-2 shadow-lg flex items-center space-x-2 hover:bg-gray-50 transition-colors"
      >
        <Bookmark className="w-4 h-4" />
        <span className="text-[12px] font-medium">Shortlist</span>
      </motion.button>


          <img
            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top"
            alt="Profile"
            className="w-full h-90 object-cover"
          />

          {/* <LazyImage
                              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top" 
            alt="Profile"
            className="w-full h-90 object-cover"
                            /> */}

          {/* White Gradient Overlay at bottom of image */}
          <div
            className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
            style={{
              background:
                "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
            }}
          ></div>

          {/* Profile Info Overlay - positioned at bottom */}
          <div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
            <h1 className="text-[18px] text-green-900 font-bold mb-2">
              Jerome bell
            </h1>
            <p className="text-[14px] text-gray-700 leading-relaxed">
              Matrimony ID: JB2847593
            </p>
          </div>
        </div>

        {/* Stats and Follow Section */}
        <div
          className="px-4 pt-[-2px] pb-4 flex flex-col gap-2 "
          style={{
            background: "rgb(255, 255, 255)",
          }}
        >
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <CakeIcon  className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                Age : 22
              </span>
            </div>

            <div className="flex items-center gap-2">
              <AccessibilityNewIcon   className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                Height: 5.2
              </span>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <GroupsIcon  className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                Hindu / Agamudiyar/thular
              </span>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <SchoolIcon  className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                BCA / Data analyst
              </span>
            </div>
          </div>

           <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <LocationOnIcon  className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
               Chennai
              </span>
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex gap-3 my-2 justify-between mx-4">
             <button className="w-[60px] h-[60px]  bg-[#A70710] hover:bg-red-300 text-white 
            font-semibold text-base py-2 rounded-full shadow-md 
            hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-2 transform hover:scale-90">
              <svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            <button className="w-[60px] h-[60px]  bg-[#034E08] hover:from-green-600
             hover:to-green-600 text-white font-semibold text-base 
              rounded-full shadow-lg hover:shadow-xl transition-all duration-300
               transform hover:scale-105 flex items-center justify-center gap-2"
                 onClick={() => setIsLiked(!isLiked)}
               >
             {isLiked ? (
                <svg className="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#EF4444"/>
                </svg>
              ) : (
                <svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              )}
            </button>
            
           
          </div>
        </div>
      </div>
    </div>
  );
}
