import React, { ChangeEvent, FC } from 'react';
import { cn, defaultTextPropsLabel, removeFocusOutlines } from '~/utils/';
import { Input, Label } from '~/components/ui';
import { useLocalize } from '~/hooks';

interface InputWithLabelProps {
  value: string;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
  label: string;
  subLabel?: string;
  id: string;
}

const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, subLabel, id }) => {
  const localize = useLocalize();
  return (
    <>
      <div className="flex flex-row">
        <Label htmlFor={id} className="text-left text-sm font-medium">
          {label}
        </Label>
        {subLabel && (
          <div className="mx-1 text-left text-sm text-gray-700 dark:text-gray-400">{subLabel}</div>
        )}
        <br />
      </div>

      <Input
        id={id}
        data-testid={`input-${id}`}
        value={value ?? ''}
        onChange={onChange}
        placeholder={`${localize('com_endpoint_config_value')} ${label}`}
        className={cn(
          defaultTextPropsLabel,
          'flex h-10 max-h-10 w-full resize-none px-3 py-2',
          removeFocusOutlines,
        )}
      />
    </>
  );
};

export default InputWithLabel;
