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

interface PlaceholderPageProps {
    title: string;
    description: string;
    icon: LucideIcon;
    phase: string;
    features: string[];
}

export function PlaceholderPage({
    title,
    description,
    icon: Icon,
    phase,
    features,
}: PlaceholderPageProps) {
    return (
        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
            <div
                className="w-20 h-20 rounded-2xl flex items-center justify-center mb-6"
                style={{ backgroundColor: "var(--muted)" }}
            >
                <Icon className="w-10 h-10" style={{ color: "var(--muted-foreground)" }} />
            </div>
            <h1
                className="text-2xl font-bold mb-2"
                style={{ fontFamily: "var(--font-display)", color: "var(--foreground)" }}
            >
                {title}
            </h1>
            <p className="text-sm max-w-md mb-6" style={{ color: "var(--muted-foreground)" }}>
                {description}
            </p>
            <div
                className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold mb-8"
                style={{
                    backgroundColor: "var(--color-accent-50)",
                    color: "var(--color-accent-700)",
                }}
            >
                📦 {phase}
            </div>
            <div
                className="w-full max-w-sm rounded-xl border p-4"
                style={{
                    backgroundColor: "var(--card)",
                    borderColor: "var(--border)",
                }}
            >
                <p className="text-xs font-semibold uppercase tracking-wide mb-3" style={{ color: "var(--muted-foreground)" }}>
                    Funcionalidades planificadas
                </p>
                <ul className="space-y-2 text-left">
                    {features.map((feature, index) => (
                        <li key={index} className="flex items-center gap-2 text-sm" style={{ color: "var(--foreground)" }}>
                            <span className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ backgroundColor: "var(--color-accent-400)" }} />
                            {feature}
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
}