'use client';

import { ImageIcon } from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { TicketDetail } from '@/types';

import { RepairProofImagesGrid } from './repair-report/RepairProofImagesGrid';
import { RepairReportPanel } from './repair-report/RepairReportPanel';
import { RepairVideoComparison } from './repair-report/RepairVideoComparison';

export function TicketRepairReportCard({ ticket }: { ticket: TicketDetail }) {
  const repair = ticket.repair;

  if (!repair) {
    return null;
  }

  return (
    <section className="space-y-5">
      <RepairReportPanel ticket={ticket} />

      <RepairVideoComparison ticket={ticket} />

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <ImageIcon className="size-5 text-primary" />
            Repair Images
          </CardTitle>
        </CardHeader>

        <CardContent>
          <RepairProofImagesGrid
            imageUrls={repair?.proof_image_urls ?? []}
            submittedAt={repair?.submitted_at ?? null}
          />
        </CardContent>
      </Card>
    </section>
  );
}