import type { MouseEvent } from "react";
import { useTranslation } from "react-i18next";
import { Play, RotateCcw } from "lucide-react";
import { Button } from "./ui/Button";
import { IconButton } from "./ui/IconButton";

// The started card's hover pair (DESIGN "Players", C5: restarting lives on the card): Continue in the
// accent, Restart dark translucent. ONE component for the YouTube card and the Plex cards, so the one
// media card says the same two words in the same two looks. A small picture (a shelf's landscape, the
// dense video card) takes the icon-only pair, which fits beside the hover row. Touch has no hover: a
// tap on the picture continues, and the card's "…" carries the restart.
export function MediaResumeButtons({
  small = false,
  onContinue,
  onRestart,
}: {
  small?: boolean;
  onContinue: (e: MouseEvent) => void;
  onRestart: (e: MouseEvent) => void;
}) {
  const { t } = useTranslation();
  return small ? (
    <>
      <IconButton
        variant="primary"
        size="md"
        round
        onClick={onContinue}
        label={t("card.continue")}
        title={t("card.continueTitle")}
      >
        <Play className="fill-current" />
      </IconButton>
      <IconButton
        variant="media"
        size="md"
        onClick={onRestart}
        label={t("card.restart")}
        title={t("card.restartTitle")}
      >
        <RotateCcw />
      </IconButton>
    </>
  ) : (
    <>
      <Button
        size="sm"
        round
        onClick={onContinue}
        title={t("card.continueTitle")}
        icon={<Play className="fill-current" />}
      >
        {t("card.continue")}
      </Button>
      <Button
        variant="media"
        size="sm"
        onClick={onRestart}
        title={t("card.restartTitle")}
        icon={<RotateCcw />}
      >
        {t("card.restart")}
      </Button>
    </>
  );
}