import { TextField as MuiTextField, TextFieldProps, Tooltip } from '@mui/material';
import { useTheme } from '../theme';
import { HelpCircle } from 'lucide-react';

export const TextField = (props: TextFieldProps) => {
  const theme = useTheme();
  const defaultProps = theme.components?.MuiTextField?.defaultProps;
  return <MuiTextField {...defaultProps} {...props} />;
};

export const TextFieldLabel = ({ children, tips, label }: { children?: React.ReactNode; tips?: string; label?: any }) => {
  return (
    <div className='flex items-center gap-1'>
      {label}
      {children}
      {tips && (
        <Tooltip title={tips}>
          <HelpCircle size={16} />
        </Tooltip>
      )}
    </div>
  );
};