// GradientTextField.tsx
import React from 'react';
import TextField, { TextFieldProps } from '@mui/material/TextField';

const GRADIENT =
  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';

const GradientTextField: React.FC<TextFieldProps> = ({ sx, ...props }) => {
  return (
    <TextField
      {...props}
      variant={props.variant ?? 'outlined'}
      sx={{
        width: '100%',
        position: 'relative',
        mt: '1.5vw',
        mb: '1.5vw',

        // Рамка инпута
        '& .MuiOutlinedInput-root': {
          position: 'relative',
          zIndex: 1,
          background: 'transparent',
          borderRadius: '3.5vw',

          '&:hover fieldset': {
            borderColor: 'transparent',
          },
          '&.Mui-focused fieldset': {
            borderColor: 'transparent',
          },
          '& fieldset': {
            borderColor: 'transparent',
          },
        },

        // Градиентная рамка через псевдоэлемент
        '& .MuiOutlinedInput-root::before': {
          content: '""',
          position: 'absolute',
          inset: 0,
          padding: '0.4vw', // толщина рамки
          borderRadius: '3.5vw',
          background: GRADIENT,
          WebkitMask:
            'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
          WebkitMaskComposite: 'xor',
          maskComposite: 'exclude',
          zIndex: 0,
        },

        // Вводимый текст
        '& .MuiInputBase-input': {
          color: 'white',
          padding: '1rem 1.5rem 1.1rem',
          fontFamily: 'Benzin-Bold',
        },

        // Лейбл как плейсхолдер, который уезжает вверх
        '& .MuiInputLabel-root': {
          fontFamily: 'Benzin-Bold',
          fontSize: '0.95rem',
          background: 'black',

          // позиция "по умолчанию" — внутри инпута
          transform: 'translate(1.5rem, 1.1rem) scale(1)',

          // градиентный текст
          color: 'transparent',
          backgroundImage: GRADIENT,
          backgroundClip: 'text',
          WebkitBackgroundClip: 'text',

          // когда лейбл "съежился" (есть фокус или значение)
          '&.MuiInputLabel-shrink': {
            transform: 'translate(1.5rem, -1.3rem) scale(0.75)',
          },

          '&.Mui-focused': {
            color: 'transparent', // не даём MUI перекрашивать
          },
        },

        ...(sx as object),
      }}
    />
  );
};

export default GradientTextField;
