import React from "react";
import Link from "next/link";
import { LucideIcon, ArrowLeft } from "lucide-react";
import { PageHeader } from "./PageHeader";
import { EmptyState } from "@/components/ui/EmptyState";
import { Badge } from "@/components/ui/Badge";
import { Button } from "@/components/ui/Button";

interface ModulePlaceholderProps {
  title: string;
  description: string;
  icon: LucideIcon;
  targetStage: string;
  category: string;
}

export const ModulePlaceholder: React.FC<ModulePlaceholderProps> = ({
  title,
  description,
  icon: Icon,
  targetStage,
  category,
}) => {
  return (
    <div className="space-y-6">
      <PageHeader
        title={title}
        description={description}
        badge={
          <Badge variant="warning">
            {targetStage}
          </Badge>
        }
        actions={
          <Link href="/">
            <Button
              variant="outline"
              size="sm"
              leftIcon={<ArrowLeft className="w-3.5 h-3.5" />}
            >
              Kembali ke Dashboard
            </Button>
          </Link>
        }
      />

      <EmptyState
        icon={Icon}
        title={`Modul ${title} Sedang Dalam Antrean Pengembangan`}
        description={`Arsitektur fondasi rute, kontrak tipe data, dan navigasi untuk modul ini telah disiapkan. Fitur lengkap, integrasi tabel Supabase, dan form interaktif akan diaktifkan secara bertahap pada ${targetStage}.`}
        badge={
          <Badge variant="neutral" size="sm">
            Kategori: {category}
          </Badge>
        }
        action={
          <div className="flex flex-col sm:flex-row items-center gap-3">
            <Link href="/">
              <Button variant="primary" size="md">
                Kembali ke Dashboard
              </Button>
            </Link>
          </div>
        }
      />
    </div>
  );
};