"use client";

import { motion } from "framer-motion";
import type { LucideIcon } from "lucide-react";

interface Props {
  icon: LucideIcon;
  title: string;
  phase: string;
  description?: string;
}

export default function ComingSoon({ icon: Icon, title, phase, description }: Props) {
  return (
    <div className="max-w-3xl">
      <h1 className="text-2xl font-extrabold text-ink mb-1">{title}</h1>
      <p className="text-sm text-ink-soft mb-8">Disponible en {phase}.</p>

      <motion.div
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        className="card p-10 text-center"
      >
        <div className="w-16 h-16 rounded-2xl bg-brand-soft text-brand-dark grid place-items-center mx-auto mb-4">
          <Icon size={28} />
        </div>
        <h2 className="font-bold text-ink mb-2">{title} — En camino</h2>
        <p className="text-sm text-ink-soft max-w-md mx-auto">
          {description ?? `Esta sección se va a habilitar en ${phase}.`}
        </p>
      </motion.div>
    </div>
  );
}