import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
} from '@mui/material';

export default function DeleteClipDialog({
  open,
  onCancel,
  onDelete,
}: {
  open: boolean;
  onCancel: () => void;
  onDelete: () => void;
}) {
  return (
    <Dialog
      open={open}
      onClose={onCancel}
      slotProps={{
        paper: { sx: { backgroundColor: '#1a1a1a', color: 'white' } },
      }}
    >
      <DialogTitle>Confirm Delete</DialogTitle>
      <DialogContent>Are you sure you want to delete this clip?</DialogContent>
      <DialogActions>
        <button
          type="button"
          onClick={onCancel}
          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
        >
          Cancel
        </button>
        <button
          type="button"
          onClick={onDelete}
          autoFocus
          className="bg-plum hover:bg-plumDark text-white font-bold h-10 px-4 rounded-md"
        >
          Delete
        </button>
      </DialogActions>
    </Dialog>
  );
}