import Box from "@mui/material/Box";
import OutlinedInput from "@mui/material/OutlinedInput";
import Typography from "@mui/material/Typography";
import type { ChangeEventHandler, ReactNode } from "react";

type AuthFieldProps = {
  autoComplete?: string;
  defaultValue?: string;
  endAdornment?: ReactNode;
  error?: boolean;
  helperText?: string;
  label: string;
  name?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  placeholder?: string;
  required?: boolean;
  type?: "email" | "password" | "text";
  value?: string;
};

export function AuthField({
  autoComplete,
  defaultValue,
  endAdornment,
  error = false,
  helperText,
  label,
  name,
  onChange,
  placeholder,
  required = false,
  type = "text",
  value,
}: AuthFieldProps) {
  return (
    <Box sx={{ width: "100%" }}>
      <Typography
        component="label"
        sx={{
          display: "block",
          mb: 2,
          fontSize: 12,
          fontWeight: 500,
          lineHeight: 1,
          color: "#414651",
        }}
      >
        {label}
        {required ? (
          <Box component="span" sx={{ color: "#F04438", ml: 0.25 }}>
            *
          </Box>
        ) : null}
      </Typography>

      <OutlinedInput
        autoComplete={autoComplete}
        defaultValue={value === undefined ? defaultValue : undefined}
        endAdornment={endAdornment}
        error={error}
        fullWidth
        name={name}
        onChange={onChange}
        placeholder={placeholder}
        type={type}
        value={value}
        sx={{
          height: 50,
          borderRadius: "6px",
          backgroundColor: "#ffffff",
          fontSize: 12,
          color: "#252b37",
          "& .MuiOutlinedInput-input": {
            px: "15px",
            py: "14px",
          },
          "& .MuiOutlinedInput-input::placeholder": {
            color: "#98A2B3",
            opacity: 1,
          },
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: error ? "#F04438" : "#e9eaeb",
          },
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: error ? "#F04438" : "#d5d7da",
          },
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: error ? "#F04438" : "#144167",
            borderWidth: 1,
          },
        }}
      />

      {error && helperText ? (
        <Typography
          sx={{
            mt: 0.75,
            color: "#F04438",
            fontSize: 12,
            fontWeight: 500,
            lineHeight: 1.4,
          }}
        >
          {helperText}
        </Typography>
      ) : null}
    </Box>
  );
}