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

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

export default function MenuBoardIndexHeader({ canManage, onCreate }: Props) {
  const t = useMenuBoardText();
  return (
    <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div className="min-w-0">
        <div className="flex items-center gap-3">
          <span className="grid h-10 w-10 shrink-0 place-items-center rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] text-[var(--accent)]">
            <MonitorPlay className="h-5 w-5" />
          </span>
          <div>
            <h1 className="text-2xl font-semibold tracking-tight text-[var(--text)]">{t("menuBoards")}</h1>
            <p className="mt-1 text-sm text-[var(--text-muted)]">{t("manageBoards")}</p>
          </div>
        </div>
      </div>
      {canManage && (
        <Button onClick={onCreate} className="w-full sm:w-auto">
          <Plus className="h-4 w-4" />
          {t("createBoard")}
        </Button>
      )}
    </header>
  );
}