// Reusable question row. Shows up on dashboard, category page, and
// search results. Centralised so the visual stays consistent.

import Link from 'next/link';
import { StatusBadge } from '@/components/ui/StatusBadge';

export interface QuestionListItem {
  id: number;
  title: string;
  productName: string;
  status: string;
  views: number;
  createdAt: string | Date;
  category: { id: number; name: string; slug: string };
  user: { id: number; name: string };
  _count: { answers: number };
}

export function QuestionCard({ question }: { question: QuestionListItem }) {
  const created = new Date(question.createdAt).toLocaleDateString();
  return (
    <Link
      href={`/questions/${question.id}`}
      className="card block p-4 transition-colors hover:border-brand-300 hover:shadow"
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <h3 className="truncate text-sm font-semibold text-gray-900 group-hover:text-brand-700">
            {question.title}
          </h3>
          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500">
            <span className="rounded bg-gray-100 px-2 py-0.5 text-gray-600">
              {question.category.name}
            </span>
            <span>{question.productName}</span>
            <span>by {question.user.name}</span>
            <span>{created}</span>
          </div>
        </div>
        <div className="flex shrink-0 items-center gap-2">
          <StatusBadge status={question.status} />
        </div>
      </div>
      <div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
        <span>{question._count.answers} answers</span>
        <span>{question.views} views</span>
      </div>
    </Link>
  );
}