import { Stack, Text, NumberInput, Slider } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";

interface ConvertFromWebSettingsProps {
  parameters: ConvertParameters;
  onParameterChange: <K extends keyof ConvertParameters>(
    key: K,
    value: ConvertParameters[K],
  ) => void;
  disabled?: boolean;
}

const ConvertFromWebSettings = ({
  parameters,
  onParameterChange,
  disabled = false,
}: ConvertFromWebSettingsProps) => {
  const { t } = useTranslation();

  return (
    <Stack gap="sm" data-testid="web-settings">
      <Text size="sm" fw={500}>
        {t("convert.webOptions", "Web to PDF Options")}:
      </Text>

      <Stack gap="xs">
        <Text size="xs" fw={500}>
          {t("convert.zoomLevel", "Zoom Level")}:
        </Text>
        <NumberInput
          value={parameters.htmlOptions.zoomLevel}
          onChange={(value) =>
            onParameterChange("htmlOptions", {
              ...parameters.htmlOptions,
              zoomLevel: Number(value) || 1.0,
            })
          }
          min={0.1}
          max={3.0}
          step={0.1}
          disabled={disabled}
          data-testid="zoom-level-input"
        />
        <Slider
          value={parameters.htmlOptions.zoomLevel}
          onChange={(value) =>
            onParameterChange("htmlOptions", {
              ...parameters.htmlOptions,
              zoomLevel: value,
            })
          }
          min={0.1}
          max={3.0}
          step={0.1}
          disabled={disabled}
          data-testid="zoom-level-slider"
        />
      </Stack>
    </Stack>
  );
};

export default ConvertFromWebSettings;
