import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

"use client";
import React, { useState } from "react";
import { motion } from "framer-motion";

function SocialCards() {
  const [hover, sethover] = useState(0);

  return (
    <div className="min-h-[20rem] max-w-screen flex justify-center items-star">
      <div className="flex max-w-[80rem] justify-center items-center relative top-50">
        {/* left 3 tile */}
        <motion.div
          onMouseEnter={() => sethover(1)}
          onMouseLeave={() => sethover(0)}
          animate={{
            scale: hover === 1 ? 1.1 : 1,
            rotate: hover === 1 ? 0 : -20,
            zIndex: hover === 1 ? 80 : 0,
          }}
          transition={{ type: "spring", stiffness: 200, damping: 20 }}
          className="absolute border border-white h-[15rem] w-[10rem] rounded-3xl overflow-hidden right-40 -top-35"
        >
          <p className="absolute text-white top-2 left-2 text-shadow-lg font-extrabold text-lg">
            Beaches
          </p>
          <p className="absolute text-white top-10 left-2 text-shadow-lg font-extrabold text-sm">
            Let the sea set you free
          </p>
          <img src="/13.jpg" className="h-full w-full object-cover" />
        </motion.div>

        {/* left 2 tile */}
        <motion.div
          onMouseEnter={() => sethover(2)}
          onMouseLeave={() => sethover(0)}
          animate={{
            scale: hover === 2 ? 1.1 : 1,
            rotate: hover === 2 ? 0 : -10,
            zIndex: hover === 2 ? 80 : 10,
          }}
          transition={{ type: "spring", stiffness: 200, damping: 20 }}
          className="absolute border border-white h-[15rem] w-[10rem] rounded-3xl overflow-hidden right-20 -top-40"
        >
          <p className="absolute text-white top-2 left-2 text-shadow-lg font-extrabold text-lg">
            Greyscale
          </p>
          <p className="absolute text-white top-10 left-2 text-shadow-lg font-extrabold text-sm">
            The art of black and white, expressing the colors of the soul.
          </p>
          <img src="/14.jpg" className="h-full w-full object-cover" />
        </motion.div>

        {/* left 1 tile */}
        <motion.div
          onMouseEnter={() => sethover(3)}
          onMouseLeave={() => sethover(0)}
          animate={{
            scale: hover === 3 ? 1.1 : 1,
            rotate: hover === 3 ? 0 : -5,
            zIndex: hover === 3 ? 80 : 20,
          }}
          transition={{ type: "spring", stiffness: 200, damping: 20 }}
          className="absolute border border-white h-[15rem] w-[10rem] rounded-3xl overflow-hidden right-5 -top-45"
        >
          <p className="absolute text-white top-2 left-2 text-shadow-lg font-extrabold text-lg">
            Japan
          </p>
          <p className="absolute text-white top-10 left-2 text-shadow-lg font-extrabold text-sm">
            The Land of the Rising Sun
          </p>
          <img src="/12.jpg" className="h-full w-full object-cover" />
        </motion.div>

        {/* center tile */}
        <motion.div
          onMouseEnter={() => sethover(4)}
          onMouseLeave={() => sethover(0)}
          animate={{
            scale: hover === 4 ? 1.1 : 1,
            zIndex: hover === 4 ? 80 : 30,
          }}
          transition={{ type: "spring", stiffness: 200, damping: 20 }}
          className="absolute border border-white h-[16rem] w-[10rem] rounded-3xl overflow-hidden -top-50"
        >
          <p className="absolute text-white top-2 left-2 text-shadow-lg font-extrabold text-lg">
            Mritunjay Rai
          </p>
          <p className="absolute text-white top-10 left-2 text-shadow-lg font-extrabold text-sm">
            A web developer learning from world !
          </p>
          <img src="/mritunjay.jpg" className="h-full w-full object-cover" />
        </motion.div>

        {/* Right 1 tile */}
        <motion.div
          onMouseEnter={() => sethover(5)}
          onMouseLeave={() => sethover(0)}
          animate={{
            scale: hover === 5 ? 1.1 : 1,
            rotate: hover === 5 ? 0 : 5,
            zIndex: hover === 5 ? 80 : 20,
          }}
          transition={{ type: "spring", stiffness: 200, damping: 20 }}
          className="absolute border border-white h-[15rem] w-[10rem] rounded-3xl overflow-hidden left-5 -top-45"
        >
          <p className="absolute text-white top-2 left-2 text-shadow-lg font-extrabold text-lg">
            Chinese Temple
          </p>
          <p className="absolute text-white top-10 left-2 text-shadow-lg font-extrabold text-sm">
            A mirror in the temple reflects the Buddha within.
          </p>
          <img src="/11.jpg" className="h-full w-full object-cover" />
        </motion.div>

        {/* Right 2 tile */}
        <motion.div
          onMouseEnter={() => sethover(6)}
          onMouseLeave={() => sethover(0)}
          animate={{
            scale: hover === 6 ? 1.1 : 1,
            rotate: hover === 6 ? 0 : 10,
            zIndex: hover === 6 ? 80 : 10,
          }}
          transition={{ type: "spring", stiffness: 200, damping: 20 }}
          className="absolute border border-white h-[15rem] w-[10rem] rounded-3xl overflow-hidden left-20 -top-40"
        >
          <p className="absolute text-white top-2 left-2 text-shadow-lg font-extrabold text-lg">
            Winter
          </p>
          <p className="absolute text-white top-10 left-2 text-shadow-lg font-extrabold text-sm">
            Snowflakes are winter's butterflies.
          </p>
          <img src="/15.jpg" className="h-full w-full object-cover" />
        </motion.div>

        {/* Right 3 tile */}
        <motion.div
          onMouseEnter={() => sethover(7)}
          onMouseLeave={() => sethover(0)}
          animate={{
            scale: hover === 7 ? 1.1 : 1,
            rotate: hover === 7 ? 0 : 20,
            zIndex: hover === 7 ? 80 : 0,
          }}
          transition={{ type: "spring", stiffness: 200, damping: 20 }}
          className="absolute border border-white h-[15rem] w-[10rem] rounded-3xl overflow-hidden left-40 -top-35"
        >
          <p className="absolute text-white top-2 left-2 text-shadow-lg font-extrabold text-lg">
            Bixby Bridge
          </p>
          <p className="absolute text-white top-10 left-2 text-shadow-lg font-extrabold text-sm">
            Standing 260 feet above the crashing Pacific.
          </p>
          <img src="/16.jpg" className="h-full w-full object-cover" />
        </motion.div>
      </div>
    </div>
  );
}

export default SocialCards;