"use client";

import React from "react";

interface SeaQaQuestionDetailProps {
  title: string;
  description: string;
  categories?: { id: number; name: string; code?: string }[];
}

const SeaQaQuestionDetail: React.FC<SeaQaQuestionDetailProps> = ({
  title,
  description,
  categories,
}) => {
  return (
    <div className="flex flex-col gap-3 self-stretch w-full">
      {categories && categories.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {categories.map((cat) => (
            <span
              key={cat.id}
              className="inline-flex items-center h-6.25 px-3 rounded-full border border-[#94a3b8] bg-transparent text-[12px] font-medium text-[#475569]"
            >
              {cat.name}
            </span>
          ))}
        </div>
      )}
      <div className="w-full flex flex-col gap-1">
        <h1 className="text-[18px] font-bold text-[#111827] leading-[1.35]">
          {title}
        </h1>
        <p className="text-[14px] text-[#6b7280] leading-normal whitespace-pre-line">
          {description}
        </p>
      </div>
    </div>
  );
};

export default SeaQaQuestionDetail;