import { Bug } from 'lucide-react';
import { useBugReport } from './use-bug-report';
import { BugReportDialog } from './BugReportDialog';

export const BugReportButton = () => {
  const bugReport = useBugReport();

  return (
    <>
      <button
        onClick={bugReport.handleOpen}
        className="flex h-8 w-8 items-center justify-center rounded-full bg-destructive text-destructive-foreground transition-transform hover:scale-110"
        aria-label="Report a bug"
      >
        <Bug size={16} />
      </button>
      <BugReportDialog
        open={bugReport.open}
        capturing={bugReport.capturing}
        submitting={bugReport.submitting}
        screenshot={bugReport.screenshot}
        onClose={bugReport.handleClose}
        onSubmit={bugReport.handleSubmit}
      />
    </>
  );
};
