'use client';

import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export type SourceLeadSummary = {
  id: string;
  code: string;
  projectName: string | null;
  status: string | null;
  awareness: string | null;
};

function FieldItem({ label, value }: { label: string; value: string | null | undefined }) {
  return (
    <div className='space-y-1'>
      <div className='text-muted-foreground text-xs'>{label}</div>
      <div className='text-sm'>{value || '-'}</div>
    </div>
  );
}

export function SourceLeadCard({ sourceLead }: { sourceLead: SourceLeadSummary | null }) {
  if (!sourceLead) {
    return null;
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Source Lead</CardTitle>
      </CardHeader>
      <CardContent className='grid gap-4 md:grid-cols-2'>
        <FieldItem label='Lead Code' value={sourceLead.code} />
        <FieldItem label='Project Name' value={sourceLead.projectName} />
        <FieldItem label='Lead Status' value={sourceLead.status} />
        <FieldItem label='Awareness' value={sourceLead.awareness} />
        <div className='md:col-span-2'>
          <Link href={`/dashboard/crm/leads/${sourceLead.id}`} className='text-sm font-medium hover:underline'>
            Open Source Lead
          </Link>
        </div>
      </CardContent>
    </Card>
  );
}
