'use client';

import { useState } from 'react';
import { Trash2 } from 'lucide-react';
import { deleteReport } from '@/app/actions/reports';
import { Button } from '@/components/ui/Button';
import { Dialog } from '@/components/ui/Dialog';
import { SubmitButton } from '@/components/ui/Field';
import { useMessages } from '@/i18n/client';

export function DeleteReportButton({ id, name }: { id: string; name: string }) {
  const t = useMessages().account.delete;
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label={t.label(name)}
        className="inline-flex size-9 items-center justify-center rounded-full text-subtle transition-colors hover:bg-canvas hover:text-fire"
      >
        <Trash2 className="size-4" />
      </button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        title={t.title}
        description={t.text}
      >
        <form action={deleteReport} className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
          <input type="hidden" name="id" value={id} />
          <Button variant="outline" onClick={() => setOpen(false)}>
            {t.cancel}
          </Button>
          <SubmitButton className="bg-fire hover:bg-fire/90 sm:w-auto">{t.confirm}</SubmitButton>
        </form>
      </Dialog>
    </>
  );
}