import { Cancion } from '@/types/types';
import { FormEvent, useState } from 'react';
import Checkbox from './Checkbox';
import InputLabel from './InputLabel';
import Modal from './Modal';
import PrimaryButton from './PrimaryButton';

export default function ModalRemoveCancion({
  show,
  cancion,
  remove,
  close,
}: {
  show: boolean;
  cancion: Cancion;
  remove: (e: FormEvent) => void;
  close: (arg0: boolean) => void;
}) {
  const [checked, setcheked] = useState(false);

  return (
    <Modal
      show={show}
      onClose={() => close(false)}
      closeable={true}
      maxWidth="md"
    >
      <form onSubmit={remove} className="p-6">
        <h2 className="mb-2 text-lg font-medium text-gray-900 dark:text-gray-100">
          Eliminando Canción
        </h2>
        <hr />
        <div className="mt-2 flex">
          <Checkbox onChange={() => setcheked(!checked)} />
          <InputLabel>Cancion a eliminar: {cancion.title}</InputLabel>
          <hr className="mt-2" />
          <div className="flex place-content-center">
            <PrimaryButton className="mt-2" type="submit" disabled={!checked}>
              Aceptar
            </PrimaryButton>
          </div>
        </div>
      </form>
    </Modal>
  );
}