import clsx from "clsx";
import { FC } from "react";

import { Select } from "~/components/Select";
import { SelectProps } from "~/components/Select/Select";

import styles from "./styles.module.css";

interface Props extends SelectProps {
  label: string;
  description?: string;
}
export const SelectField: FC<Props> = ({
  value,
  className,
  description,
  label,
  options,
  onChange,
  onChangeConfirm,
  hidePlaceholderOption,
  placeholder,
  name,
}) => {
  return (
    <div
      className={clsx([styles.selectField, className])}
      data-testid="select-field-container"
    >
      <div>
        <label className={styles.label} htmlFor={name}>
          {label}
        </label>
        {description && <div className={styles.description}>{description}</div>}
      </div>
      <Select
        className={styles.field}
        options={options}
        onChange={onChange}
        onChangeConfirm={onChangeConfirm}
        value={value}
        hidePlaceholderOption={hidePlaceholderOption}
        placeholder={placeholder}
        name={name}
      />
    </div>
  );
};