"use client";

import { IQuestion } from "@/api/types/questions";
import Link from "next/link";
import React from "react";

interface SeaQaQuestionCardProps {
  question: IQuestion;
}

const SeaQaQuestionCard: React.FC<SeaQaQuestionCardProps> = ({ question }) => {
  return (
    <Link
      href={`/discussion/${question.code}`}
      className="group bg-white rounded-2xl px-6 py-4 flex flex-col gap-3 border border-transparent hover:border-[#dbeafe] hover:shadow-sm transition-all"
    >
      {/* Topic badges */}
      {question.categories.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {question.categories.map((cat) => (
            <span
              key={cat.id}
              className="inline-flex items-center h-6.25 px-3 rounded-full border border-[#94a3b8] text-[12px] font-medium text-[#475569]"
            >
              {cat.name}
            </span>
          ))}
        </div>
      )}

      {/* Title + description */}
      <div className="flex flex-col gap-1.5">
        <div className="text-[18px] font-bold text-[#111827] leading-snug transition-colors group-hover:text-[#2563eb]">
          {question.title}
        </div>
        {question.description && (
          <p className="text-[14px] text-[#6b7280] leading-relaxed line-clamp-2 whitespace-pre-line">
            {question.description}
          </p>
        )}
      </div>

      {/* Footer */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-1 text-[12px] font-medium text-[#9ca3af]">
          <svg
            width="14"
            height="14"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"
            />
          </svg>
          <span>{question.answersCount} answers</span>
        </div>
        <div className="flex items-center gap-1.5 text-[12px] font-semibold text-[#3b82f6] group-hover:text-[#1d4ed8] transition-colors">
          <svg
            width="14"
            height="14"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M15.232 5.232l3.536 3.536M9 11l6-6 3.536 3.536-6 6H9v-3.536z"
            />
          </svg>
          Write answer
        </div>
      </div>
    </Link>
  );
};

export default SeaQaQuestionCard;