"use client"; // Ensure this is at the top of your file

import * as React from "react";
import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";

// Define your styled component
const CssTextField = styled(TextField)({
  width: "100%",
  "& label.Mui-focused": {
    color: "var(--primary)",
  },
  "& .MuiInputBase-root": {
    borderRadius: 8,
  },
  "& .MuiOutlinedInput-root": {
    "& fieldset": {
      borderColor: "var(--input-border-default)",
    },
    "&:hover fieldset": {
      borderColor: "var(--input-border-hover)",
    },
    "&.Mui-focused fieldset": {
      borderColor: "var(--primary)",
    },
  },
});

type InputType = {
  label: string;
  type: string;
  endAdornmentBoolean?: React.ReactNode;
};

// Client component
export default function CustomizedInputsStyled({
  label,
  type,
  endAdornmentBoolean,
}: InputType) {
  return (
    <>
      <CssTextField
        label={label}
        type={type}
        id="custom-css-outlined-input"
        InputProps={{ endAdornment: endAdornmentBoolean && <VisibilityOff /> }}

      />
    </>
  );
}