Argument of type 'string[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
  Type 'string[]' is not assignable to type 'never[]'.
    Type 'string' is not assignable to type 'never'.
Type '{ children: string; align: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
  Property 'align' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.

import React, { useState } from "react";
import "./Clientes.css";
import {
  TextField,
  Select,
  MenuItem,
  InputLabel,
  FormControl,
  Button,
  Chip,
} from "@mui/material";

function ClientesFisica() {
  const [nome, setNome] = useState("");
  const [numero, setNumero] = useState("");
  const [categoria, setCategoria] = useState([]);
  const [birthDate, setBirthDate] = useState("");
  const [gender, setGender] = useState("");
  const [cpf, setCpf] = useState("");
  const [cellphone, setCellphone] = useState("");
  const [email, setEmail] = useState("");
  const [website, setWebsite] = useState("");
  const [observations, setObservations] = useState("");
  const [photoPreview, setPhotoPreview] = useState<string | undefined>(
    undefined
  );

  const handlePhotoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPhotoPreview(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    // Lógica para enviar os dados do formulário
  };

  return (
    <div>
      <form className="formulario" onSubmit={handleSubmit}>
        <div className="formulario-inputs">
          <div className="formulario-inputs-row">
            <TextField
              label="Nome"
              value={nome}
              onChange={(e) => setNome(e.target.value)}
              fullWidth
              variant="outlined"
            />
            <TextField
              label="Número"
              value={numero}
              onChange={(e) => setNumero(e.target.value)}
              fullWidth
              variant="outlined"
            />
          </div>

          <div className="formulario-inputs-row">
            <FormControl fullWidth variant="outlined">
              <InputLabel id="categoria-label">Categoria</InputLabel> 
              <Select
                multiple
                labelId="categoria-label"
                value={categoria}
                label="Categoria"
                onChange={(e) => setCategoria(e.target.value as string[])}
                renderValue={(selected) => (  
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {selected.map((value) => (
                      <Chip key={value} label={value} sx={{
                        backgroundColor: '#fbfbfb', // Fundo branco
                        color: '#000',           // Texto preto
                        border: '1px solid #ccc',
                      }} />
                    ))}
                  </div>
                )}  
                >
                  <em align="center">Selecione</em>
                <MenuItem value="categoria1">Categoria 1</MenuItem>
                <MenuItem value="categoria2">Categoria 2</MenuItem>
                <MenuItem value="categoria3">Categoria 3</MenuItem>
              </Select>
            </FormControl>

            <TextField
              label="Data de Nascimento"
              type="date"
              value={birthDate}
              onChange={(e) => setBirthDate(e.target.value)}
              InputLabelProps={{
                shrink: true,
              }}
              fullWidth
              variant="outlined"
            />

            <FormControl fullWidth variant="outlined">
              <InputLabel id="gender-label">Gênero</InputLabel>
              <Select
                labelId="gender-label"
                value={gender}
                label="Gênero"
                onChange={(e) => setGender(e.target.value as string)}
              >
                <MenuItem value="">
                  <em>Selecione</em>
                </MenuItem>
                <MenuItem value="masculino">Masculino</MenuItem>
                <MenuItem value="feminino">Feminino</MenuItem>
                <MenuItem value="outro">Outro</MenuItem>
              </Select>
            </FormControl>
          </div>

          <div className="formulario-inputs-row">
            <TextField
              label="CPF"
              value={cpf}
              onChange={(e) => setCpf(e.target.value)}
              fullWidth
              variant="outlined"
            />
            <TextField
              label="Celular"
              value={cellphone}
              onChange={(e) => setCellphone(e.target.value)}
              fullWidth
              variant="outlined"
            />
          </div>

          <div className="formulario-inputs-row">
            <TextField
              label="Email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              fullWidth
              variant="outlined"
            />
            <TextField
              label="Site"
              type="url"
              value={website}
              onChange={(e) => setWebsite(e.target.value)}
              fullWidth
              variant="outlined"
            />
          </div>

          <div
            className="formulario-inputs-row"
            style={{ flexDirection: "column" }}
          >
            <TextField
              label="Observações"
              value={observations}
              onChange={(e) => setObservations(e.target.value)}
              fullWidth
              multiline
              rows={4}
              variant="outlined"
            />
          </div>
        </div>

        <div className="formulario-img">
          <div
            className="photo-section"
            onClick={() => document.getElementById("photo-input")?.click()}
          >
            <input
              type="file"
              id="photo-input"
              style={{ display: "none" }}
              accept="image/*"
              onChange={handlePhotoChange}
            />
            <div
              className="photo-preview"
              style={{ width: "100%", height: "100%" }}
            >
              {photoPreview ? (
                <img
                  src={photoPreview}
                  alt="Pré-visualização da foto"
                  style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "cover",
                  }}
                />
              ) : (
                <span style={{ color: "#fff" }}>
                  Clique para adicionar uma foto
                </span>
              )}
            </div>
          </div>
          <Button variant="contained" type="submit">
            Enviar
          </Button>
        </div>
      </form>
    </div>
  );
}

export default ClientesFisica;