import { FileDown, FileText } from 'lucide-react';
import PageTitle from '@/components/studio/PageTitle';

const reports = [
  'Case summary', 'Scan-quality report', 'AI analysis report', 'Material requirements',
  'Cost estimate', 'Printer-preparation report', 'Manufacturing report', 'Resin batch record',
  'Quality-control report', 'Approval report', 'Final case history', 'Stock-usage report'
];

const Reports = () => (
  <div className="p-3 pb-10 lg:p-4">
    <PageTitle eyebrow="Documentation" title="Reports" description="Generate, export and archive professional case documentation." />
    <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
      {reports.map(r => (
        <div key={r} className="glass-panel p-3">
          <div className="flex items-center gap-2"><FileText className="h-4 w-4 text-cyan-400" /><span className="text-[11px] text-slate-200">{r}</span></div>
          <div className="mt-3 flex gap-1.5">
            <button className="primary-button flex-1 justify-center"><FileDown /> PDF</button>
            <button className="secondary-button flex-1 justify-center">CSV</button>
            <button className="secondary-button flex-1 justify-center">Print</button>
          </div>
        </div>
      ))}
    </div>
  </div>
);
export default Reports;