import { type InputHTMLAttributes } from "react";

import clsx from "clsx";
import styles from "./Input.module.scss";

export default function Input({
  label,
  type,
  variation,
  name,
  error,
  className,
  ...rest
}: {
  label?: string;
  variation?: "default";
  name: string;
  error?: string | undefined;
  className?: string | undefined;
} & InputHTMLAttributes<HTMLInputElement>) {
  return (
    <div
      className={clsx(
        styles["input"],
        variation && styles[`input--variation--${variation}`],
        className,
      )}
    >
      <div className={styles["input__body"]}>
        {label && (
          <label htmlFor={name} className={styles["input__label"]}>
            {label}
          </label>
        )}

        <input
          type={type}
          name={name}
          id={name}
          {...rest}
          className={styles["input__input"]}
        />
      </div>

      {error && <p className={styles["input__error-message"]}>{error}</p>}
    </div>
  );
}