import * as React from "react"

import { motion, AnimatePresence } from "framer-motion"

import { cn } from "@/lib/utils"

const RATIOS = [

{ name: "16 / 9", value: 16 / 9, iconClassName: "w-[18px] h-[10px]" },

{ name: "3 / 2", value: 3 / 2, iconClassName: "w-[16px] h-[10px]" },

{ name: "4 / 3", value: 4 / 3, iconClassName: "w-[14px] h-[10.5px]" },

{ name: "1 / 1", value: 1 / 1, iconClassName: "w-[12px] h-[12px]" },

{ name: "3 / 4", value: 3 / 4, iconClassName: "w-[10.5px] h-[14px]" },

{ name: "9 / 16", value: 9 / 16, iconClassName: "w-[10px] h-[18px]" },

]

export default function AspectRatioDemo() {

const [activeRatio, setActiveRatio] = React.useState(RATIOS[0])

const [hoveredRatio, setHoveredRatio] = React.useState<string | null>(null)

return (

<div className="w-full h-full min-h-[600px] flex flex-col items-center justify-center p-10 bg-white dark:bg-[#1C1C1C]">

{/* Image Container */}

<div className="w-full max-w-[600px] h-[400px] flex items-center justify-center mb-12">

<motion.div

layout

initial={false}

animate={{ aspectRatio: activeRatio.value }}

transition={{ type: "spring", stiffness: 400, damping: 30 }}

className="relative w-full max-w-full max-h-full rounded-2xl overflow-hidden shadow-2xl dark:shadow-black/50"

>

<motion.img

layout

src="/carousel/1.png"

alt="Scenic view"

className="absolute inset-0 w-full h-full object-cover"

/>

</motion.div>

</div>

{/* Toolbar Dock */}

<div className="relative flex items-center p-2 rounded-full bg-black/5 dark:bg-white/[0.04] border border-black/10 dark:border-white/[0.05] shadow-sm backdrop-blur-md gap-1">

{RATIOS.map((ratio) => {

const isActive = activeRatio.name === ratio.name

const isHovered = hoveredRatio === ratio.name

return (

<div

key={ratio.name}

className="relative"

onMouseEnter={() => setHoveredRatio(ratio.name)}

onMouseLeave={() => setHoveredRatio(null)}

>

{/* Tooltip */}

<AnimatePresence>

{isHovered && (

<motion.div

initial={{ opacity: 0, y: 10, scale: 0.9 }}

animate={{ opacity: 1, y: 0, scale: 1 }}

exit={{ opacity: 0, y: 10, scale: 0.9 }}

transition={{ duration: 0.2 }}

className="absolute -top-12 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-lg bg-zinc-900 dark:bg-zinc-800 text-white text-xs font-medium whitespace-nowrap shadow-xl pointer-events-none"

>

{ratio.name}

</motion.div>

)}

</AnimatePresence>

<button

onClick={() => setActiveRatio(ratio)}

className={cn(

"relative flex items-center justify-center w-12 h-10 rounded-full transition-colors outline-none",

isActive ? "bg-black/10 dark:bg-black/40 text-black dark:text-white" : "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300"

)}

>

{isActive && (

<motion.div

layoutId="active-ratio-bg"

className="absolute inset-0 rounded-full bg-black/5 dark:bg-black/60 shadow-inner"

transition={{ type: "spring", stiffness: 400, damping: 30 }}

/>

)}

<div

className={cn(

"relative border-[1.5px] rounded-[4px] transition-colors duration-200",

ratio.iconClassName,

isActive ? "border-zinc-900 dark:border-white" : "border-zinc-400 dark:border-zinc-500"

)}

/>

</button>

</div>

)

})}

</div>

</div>

)

}