'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BarChart3 } from 'lucide-react';

export default function ReportsPage() {
  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-800">Reports</h1>
        <p className="text-slate-500 text-sm mt-1">Financial and operational reports</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {['Collections Report', 'Subscriber Growth', 'Invoice Aging', 'Technician Performance'].map(
          (report) => (
            <Card key={report} className="border shadow-sm hover:shadow-md transition-shadow cursor-pointer">
              <CardHeader>
                <CardTitle className="text-base flex items-center gap-2 text-slate-700">
                  <BarChart3 size={18} style={{ color: '#0891B2' }} />
                  {report}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-400 text-sm">Coming soon — report generation will be available here.</p>
              </CardContent>
            </Card>
          )
        )}
      </div>
    </div>
  );
}