کارت نظر (Comment Card)

import { CommentCard } from '@parto-system-design/ui';

export default function MyComponent() {
  return (
    <CommentCard
      text="اصلاً راضی نیستم. کالا معیوب بود و وقتی تماس گرفتم پشتیبانی جواب درستی نداد. پولم هدر رفت."
      tags={[
        { title: "دریافت کالای معیوب", probability: 91, color: "#dc2626" },
        { title: "نارضایتی از پشتیبانی", probability: 87, color: "#ef4444" }
      ]}
      sentiment="negative"
    />
  );
}

<CommentCard
  text="عالی بود! کیفیت محصول خیلی خوبه و ارسال هم سریع انجام شد. پیشنهاد می‌کنم حتماً خرید کنید."
  tags={[
    { title: "رضایت از کیفیت", probability: 95, color: "#16a34a" },
    { title: "ارسال سریع", probability: 89, color: "#22c55e" }
  ]}
  sentiment="positive"
/>

<CommentCard
  text="اصلاً راضی نیستم. کالا معیوب بود و وقتی تماس گرفتم پشتیبانی جواب درستی نداد. پولم هدر رفت."
  tags={[
    { title: "دریافت کالای معیوب", probability: 91, color: "#dc2626" },
    { title: "نارضایتی از پشتیبانی", probability: 87, color: "#ef4444" }
  ]}
  sentiment="negative"
/>

<CommentCard
  text="محصول خوبی بود، قیمت نسبتاً مناسب. چیز خاصی نداشت اما مشکلی هم نداشت."
  tags={[
    { title: "رضایت متوسط", probability: 78, color: "#6b7280" },
    { title: "قیمت مناسب", probability: 72, color: "#9ca3af" }
  ]}
  sentiment="neutral"
/>

<CommentCard
  text="محصول عالی بود اما بسته‌بندی ضعیف. متأسفانه کارتن پاره شده بود و محتویات آسیب دیده. پشتیبانی خیلی کمک کرد و جایگزین ارسال کردن."
  tags={[
    { title: "رضایت از محصول", probability: 92, color: "#16a34a" },
    { title: "بسته‌بندی ضعیف", probability: 88, color: "#dc2626" },
    { title: "پشتیبانی خوب", probability: 85, color: "#22c55e" },
    { title: "تحویل جایگزین", probability: 80, color: "#16a34a" }
  ]}
  sentiment="positive"
/>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" dir="rtl">
  <CommentCard
    text="عالی بود! کیفیت محصول خیلی خوبه و ارسال هم سریع انجام شد."
    tags={[
      { title: "رضایت از کیفیت", probability: 95, color: "#16a34a" },
      { title: "ارسال سریع", probability: 89, color: "#22c55e" }
    ]}
    sentiment="positive"
  />
  <CommentCard
    text="اصلاً راضی نیستم. کالا معیوب بود و پشتیبانی جواب نداد."
    tags={[
      { title: "دریافت کالای معیوب", probability: 91, color: "#dc2626" },
      { title: "نارضایتی از پشتیبانی", probability: 87, color: "#ef4444" }
    ]}
    sentiment="negative"
  />
  <CommentCard
    text="محصول خوبی بود، قیمت نسبتاً مناسب. چیز خاصی نداشت."
    tags={[
      { title: "رضایت متوسط", probability: 78, color: "#6b7280" }
    ]}
    sentiment="neutral"
  />
</div>

interface CommentTag {
  title: string;        // عنوان برچسب
  probability: number;  // درصد احتمال (0-100)
  color: string;        // کد رنگ HEX
}

interface CommentCardProps {
  text: string;                        // متن نظر
  tags: CommentTag[];                  // برچسب‌های تحلیلی
  sentiment: 'positive' | 'negative' | 'neutral'; // احساس کلی
  id?: number | string;                // شناسه اختیاری
  usePersianDigits?: boolean;          // استفاده از اعداد فارسی (پیش‌فرض: true)
}