Untitled

import React, { useState, useEffect } from 'react';
import { Grid, FormControl, InputLabel, Select, MenuItem, Button, Box, Typography } from '@mui/material';
import * as XLSX from 'xlsx';

const styles = {
  formControl: {
    color: '#000000',
    width: '100%',
    marginBottom: '20px',
  },
  inputLabel: {
    color: '#0288d1',
  },
  select: {
    '&:hover': {
      borderColor: '#00acc1', // Hover border color
    },
    '&.Mui-focused': {
      borderColor: '#00acc1', // Focused border color
    },
  },
  button: {
    backgroundColor: '#00acc1', // Custom button color
    color: '#ffffff', // Button text color
    '&:hover': {
      backgroundColor: '#00838f', // Button hover color
    },
  },
  errorText: {
    color: '#d32f2f',
    marginTop: '10px',
  },
};

function ConverterForm({ inputFile, setOutputFile, onInputTypeChange, fileTypeError }) {
  const [inputType, setInputType] = useState('');
  const [outputType, setOutputType] = useState('');

  useEffect(() => {
    onInputTypeChange(inputType);
  }, [inputType, onInputTypeChange]);

  const handleConvert = () => {
    // Conversion logic here
    console.log('handle convert');
  };

  return (
    <Box marginTop={2}>
      <Grid container spacing={2}>
        <Grid item xs={12} sm={6}>
          <FormControl variant="outlined" style={styles.formControl}>
            <InputLabel style={styles.inputLabel}>Input File Type</InputLabel>
            <Select
              value={inputType}
              onChange={(e) => setInputType(e.target.value)}
              label="Input File Type"
              style={styles.select}
            >
              <MenuItem value="json">JSON</MenuItem>
              <MenuItem value="csv">CSV</MenuItem>
              <MenuItem value="excel">Excel</MenuItem>
            </Select>
          </FormControl>
        </Grid>
        <Grid item xs={12} sm={6}>
          <FormControl variant="outlined" style={styles.formControl}>
            <InputLabel style={styles.inputLabel}>Output File Type</InputLabel>
            <Select
              value={outputType}
              onChange={(e) => setOutputType(e.target.value)}
              label="Output File Type"
              style={styles.select}
            >
              <MenuItem value="json">JSON</MenuItem>
              <MenuItem value="csv">CSV</MenuItem>
              <MenuItem value="xlsx">Excel</MenuItem>
            </Select>
          </FormControl>
        </Grid>
        {fileTypeError && (
          <Grid item xs={12}>
            <Typography variant="body2" style={styles.errorText}>
              {fileTypeError}
            </Typography>
          </Grid>
        )}
        <Grid item xs={12}>
          <Button
            variant="contained"
            style={styles.button}
            fullWidth
            onClick={handleConvert}
            disabled={Boolean(fileTypeError)}
          >
            Convert
          </Button>
        </Grid>
      </Grid>
    </Box>
  );
}

export default ConverterForm;