"use client";

import { useApp } from "@/contexts/AppContext";
import { ProductDetail } from "@/lib/api/fundmarket";

interface AssetDescriptionCardProps {
  product: ProductDetail;
}

export default function AssetDescriptionCard({ product }: AssetDescriptionCardProps) {
  const { t } = useApp();

  return (
    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-4 md:p-8 flex flex-col gap-4 md:min-h-[320px]">
      <h3 className="text-body-large font-bold text-text-primary dark:text-white">
        {t("description.title")}
      </h3>
      <div className="text-body-default font-regular text-text-primary dark:text-gray-300 leading-relaxed whitespace-pre-line overflow-y-auto max-h-[200px] md:max-h-[260px]">
        {product.description}
      </div>
    </div>
  );
}