"use client";

import { useState } from "react"

import { Skeleton } from "./skeleton"

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

export function SkeletonDemo() {

const [isRevealed, setIsRevealed] = useState(false)

return (

<div className="w-full h-full flex flex-col items-center justify-center p-8 gap-6">

<div className="flex items-center gap-4 min-w-[220px]">

<AnimatePresence mode="wait">

{!isRevealed ? (

<motion.div

key="skeleton"

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

transition={{ duration: 0.2 }}

className="flex items-center gap-4 w-full"

>

<Skeleton className="w-11 h-11 rounded-full shrink-0" />

<div className="flex flex-col gap-2 w-full">

<Skeleton className="h-3 w-3/4" />

<Skeleton className="h-3 w-1/2" />

</div>

</motion.div>

) : (

<motion.div

key="content"

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

transition={{ duration: 0.2 }}

className="flex items-center gap-4 w-full"

>

<div className="w-11 h-11 shrink-0 rounded-full overflow-hidden bg-zinc-200 dark:bg-zinc-800">

<img

src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&q=80&w=100&h=100"

alt="Pratik Pandey"

className="w-full h-full object-cover"

/>

</div>

<div className="flex flex-col justify-center">

<span className="text-[14px] font-semibold text-zinc-900 dark:text-zinc-100 leading-tight">

Pratik Pandey

</span>

<span className="text-[13px] text-zinc-500 mt-0.5">

Design engineer

</span>

</div>

</motion.div>

)}

</AnimatePresence>

</div>

<button

onClick={() => setIsRevealed(!isRevealed)}

className="px-4 py-1.5 rounded-full text-[13px] font-medium bg-zinc-100 dark:bg-[#1C1C1C] text-zinc-900 dark:text-zinc-100 hover:bg-zinc-200 dark:hover:bg-[#2A2A2A] transition-colors border border-black/5 dark:border-white/5 shadow-sm"

>

{isRevealed ? "Hide" : "Reveal"}

</button>

</div>

)

}