'use client';

import { motion } from 'framer-motion';
import { Compass, Sparkles } from 'lucide-react';

type ProfileEmptyStateCardProps = {
  title: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
};

export default function ProfileEmptyStateCard({
  title,
  description,
  actionLabel,
  onAction,
}: ProfileEmptyStateCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.22 }}
      className="relative overflow-hidden rounded-2xl border border-white/10 bg-black/35 p-6 backdrop-blur-md"
    >
      <div className="pointer-events-none absolute -right-14 -top-14 h-44 w-44 rounded-full bg-violet-500/15 blur-3xl" />
      <div className="pointer-events-none absolute -left-10 -bottom-16 h-40 w-40 rounded-full bg-blue-500/10 blur-3xl" />

      <div className="relative flex flex-col items-center text-center">
        <div className="relative mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl border border-violet-500/30 bg-violet-500/15 text-violet-200 shadow-[0_0_28px_rgba(139,92,246,0.24)]">
          <Compass className="h-8 w-8" />
          <span className="absolute -right-1.5 -top-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full border border-fuchsia-500/30 bg-fuchsia-500/20 text-fuchsia-200">
            <Sparkles className="h-3.5 w-3.5" />
          </span>
        </div>

        <h3 className="mb-2 text-xl font-semibold tracking-tight text-white">{title}</h3>
        <p className="mb-5 max-w-xl text-sm text-gray-400">{description}</p>

        <button
          type="button"
          onClick={onAction}
          className="inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-fuchsia-500 to-violet-600 px-4 py-2.5 text-sm font-semibold text-white shadow-[0_0_24px_rgba(139,92,246,0.28)] transition-all duration-300 hover:brightness-110"
        >
          {actionLabel}
        </button>
      </div>
    </motion.div>
  );
}