reui-blocks/blocks/product-specs2.tsx

"use client";

import { Check, X } from "lucide-react";
import { useState } from "react";

import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

interface Spec {
  label: string;
  value: string | boolean;
  highlight?: boolean;
}

interface SpecGroup {
  id: string;
  name: string;
  specs: Spec[];
}

const DEFAULT_SPEC_GROUPS: SpecGroup[] = [
  {
    id: "overview",
    name: "نمای کلی",
    specs: [
      { label: "مدل", value: "MacBook حرفه‌ای 14 (2024)", highlight: true },
      { label: "پردازنده", value: "اپل M3 حرفه‌ای", highlight: true },
      { label: "حافظه", value: "۱۸ گیگابایت Unified Memory" },
      { label: "ذخیره‌سازی", value: "۵۱۲ گیگابایت SSD" },
      { label: "نمایشگر", value: '۱۴٫۲ اینچ Liquid Retina XDR', highlight: true },
      { label: "عمر باتری", value: "تا ۱۷ ساعت" },
      { label: "وزن", value: "۱٫۶۰ کیلوگرم (۳٫۵ پوند)" },
      { label: "رنگ", value: "مشکی فضایی" },
    ],
  },
  {
    id: "display",
    name: "نمایشگر",
    specs: [
      { label: "اندازه صفحه", value: '۱۴٫۲ اینچ (قطری)' },
      { label: "وضوح تصویر", value: "۳۲۴ × ۱۹۶۴ پیکسل" },
      { label: "تراکم پیکسل", value: "۲۵۴ ppi" },
      { label: "نوع صفحه", value: "Liquid Retina XDR" },
      { label: "نرخ نوساز", value: "ProMotion (۲۴ تا ۱۲۰ هرتز)", highlight: true },
      { label: "روشنایی حداکثر (HDR)", value: "۱۶۰۰ نیت" },
      { label: "روشنایی حداکثر (SDR)", value: "۱۰۰۰ نیت" },
      { label: "رنگ گسترده (P3)", value: true },
      { label: "True Tone", value: true },
      { label: "فناوری ProMotion", value: true },
    ],
  },
  {
    id: "performance",
    name: "تراشه و عملکرد",
    specs: [
      { label: "تراشه", value: "اپل M3 حرفه‌ای", highlight: true },
      { label: "هسته‌های CPU", value: "۱۱ هسته (۵ عملکردی + ۶ کارآمد)" },
      { label: "هسته‌های GPU", value: "۱۴ هسته" },
      { label: "موتور عصبی", value: "۱۶ هسته" },
      { label: "پهنای باند حافظه", value: "۱۵۰ گیگابایت بر ثانیه" },
      { label: "حافظه یکپارچه", value: "۱۸ گیگابایت (قابل تنظیم تا ۳۶ گیگابایت)" },
      { label: "ردیابی پرتو سخت‌افزاری", value: true },
      { label: "موتور رسانه", value: true },
    ],
  },
  {
    id: "storage",
    name: "حافظه و ذخیره‌سازی",
    specs: [
      { label: "حافظه پایه", value: "۵۱۲ گیگابایت SSD" },
      { label: "حداکثر حافظه", value: "۸ ترابایت SSD" },
      { label: "نوع حافظه", value: "NVMe SSD" },
      { label: "سرعت خواندن", value: "تا ۷٫۴ گیگابایت بر ثانیه" },
      { label: "حافظه RAM پایه", value: "۱۸ گیگابایت Unified" },
      { label: "حداکثر RAM", value: "۳۶ گیگابایت Unified" },
      { label: "نوع RAM", value: "LPDDR5" },
      { label: "قابل ارتقا توسط کاربر", value: false },
    ],
  },
  {
    id: "connectivity",
    name: "درگاه‌ها و ارتباطات",
    specs: [
      { label: "درگاه‌های Thunderbolt 4", value: "۳" },
      { label: "درگاه HDMI", value: "۱ (پشتیبانی از ۸K)" },
      { label: "اسلات کارت SDXC", value: true },
      { label: "MagSafe 3", value: true },
      { label: "جک هدفون", value: "۳٫۵ میلی‌متر (امپدانس بالا)" },
      { label: "Wi-Fi", value: "Wi-Fi 6E (802.11ax)" },
      { label: "بلوتوث", value: "۵٫۳" },
    ],
  },
  {
    id: "dimensions",
    name: "ابعاد و وزن",
    specs: [
      { label: "ارتفاع", value: "۱٫۵۵ سانتی‌متر (۰٫۶۱ اینچ)" },
      { label: "عرض", value: "۳۱٫۲۶ سانتی‌متر (۱۲٫۳۱ اینچ)" },
      { label: "عمق", value: "۲۲٫۱۲ سانتی‌متر (۸٫۷۱ اینچ)" },
      { label: "وزن", value: "۱٫۶۰ کیلوگرم (۳٫۵ پوند)" },
    ],
  },
];

interface ProductSpecs2Props {
  specGroups?: SpecGroup[];
  title?: string;
  className?: string;
}

const ProductSpecs2 = ({
  specGroups = DEFAULT_SPEC_GROUPS,
  title = "مشخصات",
  className,
}: ProductSpecs2Props) => {
  const [activeTab, setActiveTab] = useState(specGroups[0]?.id || "overview");

  const renderValue = (value: string | boolean) => {
    if (typeof value === "boolean") {
      return value ? (
        <Check className="size-5 text-emerald-600" />
      ) : (
        <X className="size-5 text-muted-foreground" />
      );
    }
    return value;
  };

  return (
    <section className={cn("py-16 text-start md:py-24", className)}>
      <div className="container max-w-5xl" dir="rtl">
        {/* Header */}
        <h2 className="mb-8 text-start text-xl font-semibold tracking-tight md:text-3xl">
          {title}
        </h2>

        <Tabs value={activeTab} onValueChange={setActiveTab} className="text-start">
          <ScrollableTabsList className="rounded-none [&_[data-slot=scroll-area-viewport]]:dir-rtl">
            <TabsList className="flex h-auto w-full justify-start overflow-y-hidden">
              {specGroups.map((group) => (
                <TabsTrigger key={group.id} value={group.id}>
                  {group.name}
                </TabsTrigger>
              ))}
            </TabsList>
          </ScrollableTabsList>

          {specGroups.map((group) => (
            <TabsContent key={group.id} value={group.id} className="mt-0 text-start">
              <div className="rounded-lg border" dir="rtl">
                <div className="grid divide-y">
                  {group.specs.map((spec, index) => (
                    <div
                      key={index}
                      className={cn(
                        "grid grid-cols-2 gap-4 px-4 py-3 text-start md:px-6",
                        spec.highlight && "bg-muted/30",
                      )}
                    >
                      <div className="flex items-center justify-start gap-2 text-start">
                        <span className="text-muted-foreground">
                          {spec.label}
                        </span>
                        {spec.highlight && (
                          <Badge
                            variant="secondary"
                            className="text-xs font-normal"
                          >
                            مشخصه کلیدی
                          </Badge>
                        )}
                      </div>
                      <div className="flex items-center justify-end text-end font-medium">
                        {renderValue(spec.value)}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </TabsContent>
          ))}
        </Tabs>

        {/* Quick Specs Summary */}
        <div className="mt-8 rounded-lg bg-muted/30 p-6 text-start">
          <h3 className="mb-4 text-start font-medium">نکات برجسته</h3>
          <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4">
            {specGroups[0]?.specs
              .filter((s) => s.highlight)
              .slice(0, 4)
              .map((spec, index) => (
                <div key={index} className="text-start">
                  <p className="text-sm text-muted-foreground">{spec.label}</p>
                  <p className="font-semibold">{spec.value as string}</p>
                </div>
              ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { ProductSpecs2 };