import Link from "next/link";
import { PackageOpen } from "lucide-react";
import styles from "./EmptyState.module.css";

interface EmptyStateProps {
  title?: string;
  description?: string;
  ctaLabel?: string;
  ctaHref?: string;
  onCtaClick?: () => void;
}

export default function EmptyState({
  title = "Tidak Ada Data",
  description = "Belum ada data yang tersedia saat ini.",
  ctaLabel,
  ctaHref,
  onCtaClick,
}: EmptyStateProps) {
  return (
    <div className={styles.wrapper} aria-live="polite">
      <div className={styles.icon}>
        <PackageOpen size={32} aria-hidden />
      </div>
      <h2 className={styles.title}>{title}</h2>
      <p className={styles.desc}>{description}</p>
      {ctaLabel && ctaHref && (
        <Link href={ctaHref} className="btn btn-primary btn-sm" id="empty-state-cta">
          {ctaLabel}
        </Link>
      )}
      {ctaLabel && onCtaClick && (
        <button onClick={onCtaClick} className="btn btn-primary btn-sm" id="empty-state-cta-btn">
          {ctaLabel}
        </button>
      )}
    </div>
  );
}