'use client';

import Link from 'next/link';
import { formatDistanceToNowStrict } from 'date-fns';

import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { KIND_LABELS, TRIAGE_TONE, type InquiryRow } from '@/components/inquiries/inquiry-columns';

export function InquiryCard({ inquiry, portSlug }: { inquiry: InquiryRow; portSlug: string }) {
  return (
    <Link href={`/${portSlug}/inquiries/${inquiry.id}`} className="block">
      <Card className="transition-shadow hover:shadow-sm">
        <CardContent className="p-3">
          <div className="flex items-start justify-between gap-2">
            <div className="min-w-0">
              <p className="truncate font-medium">{inquiry.contactName || '(no name)'}</p>
              {inquiry.contactEmail ? (
                <p className="truncate text-sm text-muted-foreground">{inquiry.contactEmail}</p>
              ) : null}
            </div>
            <Badge className={TRIAGE_TONE[inquiry.triageState]}>{inquiry.triageState}</Badge>
          </div>
          <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
            <span>{KIND_LABELS[inquiry.kind]}</span>
            <span>·</span>
            <span>
              {formatDistanceToNowStrict(new Date(inquiry.receivedAt), { addSuffix: true })}
            </span>
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}
