"use client";

import { useState } from "react";

import { Heart } from "lucide-react";

import { motion } from "framer-motion";

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

export function ItemDemo() {

const [liked, setLiked] = useState(false);

return (

<div className="flex items-center justify-between p-3.5 rounded-[14px] border border-black/5 dark:border-white/10 bg-white dark:bg-[#1C1C1C] hover:bg-black/[0.02] dark:hover:bg-white/5 transition-all cursor-pointer w-full max-w-[340px] shadow-sm group">

<div className="flex items-center gap-3.5">

<div className="w-[42px] h-[42px] rounded-[10px] bg-zinc-100 dark:bg-[#2A2A2A] border border-black/5 dark:border-white/5 flex items-center justify-center shrink-0">

<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-zinc-700 dark:text-zinc-300"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="M9 13v4M12 13v4M15 13v4"/></svg>

</div>

<div className="flex flex-col gap-1">

<span className="text-[13.5px] font-medium text-zinc-900 dark:text-zinc-100 leading-none">Design tokens</span>

<span className="text-[12.5px] text-zinc-500 dark:text-zinc-400 leading-none">Updated 2 hours ago</span>

</div>

</div>

<button

onClick={(e) => {

e.stopPropagation();

setLiked(!liked);

}}

className={cn(

"w-8 h-8 flex items-center justify-center rounded-full transition-colors outline-none",

liked

? "text-red-500 hover:bg-red-500/10 opacity-100"

: "text-zinc-400 dark:text-zinc-500 hover:bg-black/5 dark:hover:bg-white/10 hover:text-red-500 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 focus:opacity-100"

)}

>

<motion.div

initial={false}

animate={{ scale: liked ? 1.15 : 1 }}

whileTap={{ scale: 0.9 }}

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

>

<Heart

className="w-[15px] h-[15px] transition-colors"

fill={liked ? "currentColor" : "none"}

strokeWidth={liked ? 0 : 2}

/>

</motion.div>

</button>

</div>

);

}