'use client'

import { useThemeClient } from '@/hooks/useThemeClient'
import { TextField, TextFieldProps } from '@mui/material'
import { ReactNode } from 'react'

type InputMuiProps = TextFieldProps & {
  label: string
  variant: 'standard' | 'filled' | 'outlined'
  children?: ReactNode
}

export function InputMui({
  label,
  variant,
  children,
  ...props
}: InputMuiProps) {
  const themeConfig = useThemeClient()

  const color = themeConfig === 'dark' ? '#fafafa' : '#3C3C3C'

  return (
    <TextField
      label={label}
      variant={variant}
      {...props}
      sx={{
        '& .MuiOutlinedInput-root': {
          '& fieldset': {
            borderColor: color,
          },
          '&:hover fieldset': {
            borderColor: color,
          },
          '&.Mui-focused fieldset': {
            borderColor: color,
          },
        },
        '& label.Mui-focused': {
          color: `${color}`,
        },
        '& label': {
          color: `${color}`,
        },
        '& input': {
          color: `${color}`,
        },
        '& .MuiInputBase-input': {
          color: `${color}`,
        },
        '& .MuiInput-underline:before': {
          borderBottomColor: color,
        },
        '& .MuiInput-underline:hover:before': {
          borderBottomColor: `${color} !important`,
        },
        '& .MuiInput-underline:after': {
          borderBottomColor: color,
        },
        '& .MuiFilledInput-underline:before': {
          borderBottomColor: color,
        },
        '& .MuiFilledInput-underline:hover:before': {
          borderBottomColor: `${color} !important`,
        },
        '& .MuiFilledInput-underline:after': {
          borderBottomColor: color,
        },
      }}
    >
      {children}
    </TextField>
  )
}
