import { Label } from "@kandev/ui/label";
import { RadioGroup, RadioGroupItem } from "@kandev/ui/radio-group";
import type { GitHubAppVisibility } from "@/lib/types/github";
import { useTranslation } from "react-i18next";

export function GitHubAppVisibilityField({
  value,
  onChange,
}: {
  value: GitHubAppVisibility;
  onChange: (value: GitHubAppVisibility) => void;
}) {
  const { t } = useTranslation();
  return (
    <fieldset className="space-y-2">
      <legend className="text-sm font-medium">{t("github:whoCanInstallThisApp")}</legend>
      <RadioGroup
        value={value}
        onValueChange={(next) => onChange(next as GitHubAppVisibility)}
        className="grid gap-2 sm:grid-cols-2"
      >
        <Label className="flex min-h-20 cursor-pointer items-start gap-3 rounded-md border p-3">
          <RadioGroupItem value="private" className="mt-0.5" />
          <span>
            <span className="block text-sm font-medium">{t("github:onlyTheAppOwner")}</span>
            <span className="block text-xs font-normal leading-5 text-muted-foreground">
              {t("github:bestForPersonalOrCompanyInternal")}
            </span>
          </span>
        </Label>
        <Label className="flex min-h-20 cursor-pointer items-start gap-3 rounded-md border p-3">
          <RadioGroupItem value="public" className="mt-0.5" />
          <span>
            <span className="block text-sm font-medium">{t("github:otherGithubAccounts")}</span>
            <span className="block text-xs font-normal leading-5 text-muted-foreground">
              {t("github:allowsInstallationElsewhereItDoesNot")}
            </span>
          </span>
        </Label>
      </RadioGroup>
    </fieldset>
  );
}