reui-blocks/blocks/product-specs1.tsx

"use client";

import {
  Battery,
  Box,
  ChevronDown,
  Cpu,
  HardDrive,
  Monitor,
  Wifi,
} from "lucide-react";
import { useState } from "react";

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";

interface Spec {
  label: string;
  value: string;
}

interface SpecCategory {
  id: string;
  name: string;
  icon: React.ReactNode;
  specs: Spec[];
}

const DEFAULT_CATEGORIES: SpecCategory[] = [
  {
    id: "display",
    name: "نمایشگر",
    icon: <Monitor className="size-4" />,
    specs: [
      { label: "اندازه صفحه", value: '۶٫۷ اینچ Super Retina XDR' },
      { label: "وضوح تصویر", value: "۲۷۹۶ × ۱۲۹۰ پیکسل" },
      { label: "تراکم پیکسل", value: "۴۶۰ ppi" },
      { label: "نرخ نوساز", value: "۱ تا ۱۲۰ هرتز ProMotion" },
      { label: "نوع صفحه", value: "OLED، HDR" },
      { label: "روشنایی حداکثر", value: "۲۰۰۰ نیت (فضای باز)" },
    ],
  },
  {
    id: "performance",
    name: "عملکرد",
    icon: <Cpu className="size-4" />,
    specs: [
      { label: "پردازنده", value: "تراشه A17 حرفه‌ای" },
      { label: "هسته‌های CPU", value: "۶ هسته (۲ عملکردی + ۴ کارآمد)" },
      { label: "پردازنده گرافیکی", value: "GPU شش‌هسته‌ای" },
      { label: "موتور عصبی", value: "۱۶ هسته" },
      { label: "حافظه RAM", value: "۸ گیگابایت" },
    ],
  },
  {
    id: "storage",
    name: "حافظه",
    icon: <HardDrive className="size-4" />,
    specs: [
      { label: "حافظه داخلی", value: "۲۵۶ / ۵۱۲ گیگابایت / ۱ ترابایت" },
      { label: "قابل گسترش", value: "خیر" },
      { label: "فضای ابری", value: "iCloud (۵ گیگابایت رایگان)" },
    ],
  },
  {
    id: "battery",
    name: "باتری و شارژ",
    icon: <Battery className="size-4" />,
    specs: [
      { label: "ظرفیت باتری", value: "۴۴۲۲ میلی‌آمپرساعت" },
      { label: "پخش ویدیو", value: "تا ۲۹ ساعت" },
      { label: "پخش آنلاین", value: "تا ۲۵ ساعت" },
      { label: "شارژ سیمی", value: "شارژ سریع ۲۷ وات" },
      { label: "شارژ بی‌سیم", value: "MagSafe ۱۵ وات، Qi ۷٫۵ وات" },
      { label: "شارژ معکوس", value: "خیر" },
    ],
  },
  {
    id: "connectivity",
    name: "ارتباطات",
    icon: <Wifi className="size-4" />,
    specs: [
      { label: "۵G", value: "بله (sub-6 GHz، mmWave)" },
      { label: "Wi-Fi", value: "Wi-Fi 6E (802.11ax)" },
      { label: "بلوتوث", value: "۵٫۳" },
      { label: "NFC", value: "بله" },
      { label: "USB", value: "USB-C 3.0 (۱۰ گیگابیت بر ثانیه)" },
      { label: "ماهواره", value: "SOS اضطراری" },
    ],
  },
  {
    id: "physical",
    name: "مشخصات فیزیکی",
    icon: <Box className="size-4" />,
    specs: [
      { label: "ارتفاع", value: "۱۵۹٫۹ میلی‌متر" },
      { label: "عرض", value: "۷۶٫۷ میلی‌متر" },
      { label: "ضخامت", value: "۸٫۲۵ میلی‌متر" },
      { label: "وزن", value: "۲۲۱ گرم" },
      { label: "بدنه", value: "قاب تیتانیومی، محافظ سرامیکی" },
      { label: "مقاومت در برابر آب", value: "IP68 (۶ متر به مدت ۳۰ دقیقه)" },
    ],
  },
];

interface ProductSpecs1Props {
  categories?: SpecCategory[];
  title?: string;
  className?: string;
}

const ProductSpecs1 = ({
  categories = DEFAULT_CATEGORIES,
  title = "مشخصات فنی",
  className,
}: ProductSpecs1Props) => {
  const [openCategories, setOpenCategories] = useState<string[]>(
    categories.map((c) => c.id),
  );

  const toggleCategory = (id: string) => {
    setOpenCategories((prev) =>
      prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id],
    );
  };

  const expandAll = () => setOpenCategories(categories.map((c) => c.id));
  const collapseAll = () => setOpenCategories([]);

  return (
    <section className={cn("py-16 md:py-24", className)}>
      <div className="container max-w-4xl">
        {/* Header */}
        <div className="mb-8 flex items-center justify-between">
          <h2 className="text-xl font-semibold tracking-tight md:text-3xl">
            {title}
          </h2>
          <div className="flex gap-2 text-sm">
            <button
              onClick={expandAll}
              className="text-muted-foreground hover:text-foreground"
            >
              باز کردن همه
            </button>
            <span className="text-muted-foreground">·</span>
            <button
              onClick={collapseAll}
              className="text-muted-foreground hover:text-foreground"
            >
              بستن همه
            </button>
          </div>
        </div>

        {/* Spec Categories */}
        <div className="space-y-4">
          {categories.map((category) => (
            <Collapsible
              key={category.id}
              open={openCategories.includes(category.id)}
              onOpenChange={() => toggleCategory(category.id)}
            >
              <div className="rounded-lg border">
                <CollapsibleTrigger className="flex w-full items-center justify-between p-4 text-start hover:bg-muted/50">
                  <div className="flex items-center gap-3">
                    <div className="flex size-8 items-center justify-center rounded-md bg-muted">
                      {category.icon}
                    </div>
                    <span className="font-medium">{category.name}</span>
                  </div>
                  <ChevronDown
                    className={cn(
                      "size-5 text-muted-foreground transition-transform",
                      openCategories.includes(category.id) && "rotate-180",
                    )}
                  />
                </CollapsibleTrigger>
                <CollapsibleContent>
                  <div className="border-t">
                    <Table>
                      <TableBody>
                        {category.specs.map((spec, index) => (
                          <TableRow
                            key={index}
                            className="hover:bg-transparent"
                          >
                            <TableCell className="w-1/2 py-3 text-muted-foreground">
                              {spec.label}
                            </TableCell>
                            <TableCell className="py-3 font-medium">
                              {spec.value}
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </CollapsibleContent>
              </div>
            </Collapsible>
          ))}
        </div>
      </div>
    </section>
  );
};

export { ProductSpecs1 };