import { MonitorPlay, Plus } from "lucide-react";
import Button from "@/components/ui/Button";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";

type Props = {
  canManage: boolean;
  hasBoards: boolean;
  onCreate: () => void;
};

export default function MenuBoardEmptyState({ canManage, hasBoards, onCreate }: Props) {
  const t = useMenuBoardText();
  return (
    <section className="rounded-xl border border-dashed border-[var(--border)] bg-[var(--bg-elevated)] px-6 py-16 text-center">
      <MonitorPlay className="mx-auto h-10 w-10 text-[var(--text-faint)]" />
      <h2 className="mt-4 text-base font-semibold text-[var(--text)]">
        {hasBoards ? t("noMatches") : t("noBoards")}
      </h2>
      <p className="mx-auto mt-2 max-w-md text-sm text-[var(--text-muted)]">
        {hasBoards
          ? t("adjustFilters")
          : t("createFirstBoard")}
      </p>
      {canManage && !hasBoards && (
        <Button type="button" onClick={onCreate} className="mt-5">
          <Plus className="h-4 w-4" />
          {t("createBoard")}
        </Button>
      )}
    </section>
  );
}