Preview Details Card

'use client'

import { useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { ArrowUpRight } from 'lucide-react'

const previewHighlights = [
  { label: 'Owner', value: 'Avery Nolan' },
  { label: 'Status', value: 'Sprint ready' },
]

export function PreviewDetailsCard() {
  const [isHovered, setIsHovered] = useState(false)

  return (
    <div className="flex items-center justify-center p-12">
      <motion.a
        href="#"
        onHoverStart={() => setIsHovered(true)}
        onHoverEnd={() => setIsHovered(false)}
        className="group relative inline-flex w-[320px] flex-col gap-4 rounded-2xl border border-white/10 bg-[var(--card-bg)]/60 px-6 py-5 text-[var(--foreground)]/80 backdrop-blur-xl transition-colors duration-300 hover:border-white/20 hover:bg-[var(--card-bg)]/80"
        layout
        transition={{ type: 'spring', stiffness: 220, damping: 28 }}
      >
        <div className="flex items-center justify-between">
          <span className="text-xs uppercase tracking-[0.28em] text-[var(--foreground)]/45">Workspace</span>
          <ArrowUpRight className="h-4 w-4 text-[var(--foreground)]/50 transition-transform duration-300 group-hover:-translate-y-1 group-hover:translate-x-1" />
        </div>
        <div className="text-lg font-semibold text-[var(--foreground)]">Preview Details Card</div>
        <p className="text-sm leading-relaxed text-[var(--foreground)]/60">
          Hover to peek at the highlights before opening the workspace.
        </p>

        <AnimatePresence>
          {isHovered && (
            <motion.div
              key="preview"
              initial={{ opacity: 0, y: 16, height: 0 }}
              animate={{ opacity: 1, y: 0, height: 'auto' }}
              exit={{ opacity: 0, y: 8, height: 0 }}
              transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
              className="overflow-hidden rounded-2xl border border-white/10 bg-[var(--card-bg)]/80 p-4 text-sm text-[var(--foreground)]/75 shadow-[0_18px_45px_rgba(15,23,42,0.35)]"
              layout
            >
              <div className="mb-3 flex items-center justify-between text-[10px] uppercase tracking-[0.32em] text-[var(--foreground)]/45">
                peek inside
                <span className="rounded-full bg-white/5 px-2 py-0.5 text-[0.65rem] text-[var(--foreground)]/60">
                  preview
                </span>
              </div>
              <ul className="space-y-2">
                {previewHighlights.map((item) => (
                  <li key={item.label} className="flex items-center justify-between gap-3">
                    <span className="text-[10px] uppercase tracking-[0.24em] text-[var(--foreground)]/45">
                      {item.label}
                    </span>
                    <span className="font-medium text-[var(--foreground)]">{item.value}</span>
                  </li>
                ))}
              </ul>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.a>
    </div>
  )
}