reui-blocks/blocks/download3.tsx

import { CheckCircle, Download } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Download3Props {
  heading?: string;
  description?: string;
  version?: string;
  fileSize?: string;
  requirements?: string[];
  downloadButton?: {
    text: string;
    url: string;
    className?: string;
  };
  secondaryButton?: {
    text: string;
    url: string;
  };
  className?: string;
}

const Download3 = ({
  heading = "دانلود اپلیکیشن دسکتاپ",
  description =
    "نسخه دسکتاپ برای مدیریت قیف فروش و گزارش‌گیری. سازگار با ویندوز، macOS و لینوکس.",
  version = "نسخه ۲.۱",
  fileSize = "۱۴۵ مگابایت",
  requirements = [
    "ویندوز ۱۰+ / macOS 10.15+ / اوبونتو 18.04+",
    "حداقل ۴ گیگابایت رم",
    "۱ گیگابایت فضای آزاد دیسک",
    "اتصال به اینترنت برای همگام‌سازی ابری",
  ],
  downloadButton = {
    text: "دانلود و شروع همگام‌سازی",
    url: "#",
  },
  secondaryButton = {
    text: "مشاهده یادداشت انتشار",
    url: "#",
  },
  className,
}: Download3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-2xl text-center">
          <div className="mb-12 flex flex-col items-center gap-4">
            <img
              src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
              alt="لوگوی اپلیکیشن"
              className="h-14"
            />
            <h2 className="mb-4 text-xl font-bold tracking-tight sm:text-2xll lg:text-2xll">
              {heading}
            </h2>
            <p className="text-lg text-muted-foreground">{description}</p>
          </div>

          <Card className="p-8 text-start">
            <div className="mb-6 flex items-center justify-between">
              <div>
                <h3 className="text-xl font-semibold">اپلیکیشن دسکتاپ</h3>
                <p className="text-muted-foreground" dir="rtl">
                  PC / Mac / Linux
                </p>
              </div>
              <div className="text-end">
                <p className="text-sm font-medium">{version}</p>
                <p className="text-sm text-muted-foreground">{fileSize}</p>
              </div>
            </div>

            <div className="mb-2">
              <h4 className="mb-4 font-semibold">حداقل نیازمندی‌ها:</h4>
              <div className="space-y-2">
                {requirements.map((requirement, index) => (
                  <div key={index} className="flex items-center gap-3">
                    <CheckCircle className="h-4 w-4 shrink-0 text-green-500" />
                    <span
                      className="text-sm text-muted-foreground"
                      dir={/[A-Za-z]/.test(requirement) ? "ltr" : undefined}
                    >
                      {requirement}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            <div className="flex flex-col gap-3 sm:flex-row">
              <Button size="lg" className="flex-1" asChild>
                <a
                  href={downloadButton.url}
                  className="inline-flex items-center justify-center gap-2"
                >
                  {downloadButton.text}
                  <Download className="h-5 w-5" />
                </a>
              </Button>
              <Button variant="outline" size="lg" className="flex-1" asChild>
                <a href={secondaryButton.url}>{secondaryButton.text}</a>
              </Button>
            </div>

            <div className="mt-4 text-center">
              <p className="text-sm text-muted-foreground">
                دانلود رایگان • راه‌اندازی سریع • ۱۴ روز آزمایشی رایگان
              </p>
            </div>
          </Card>

          <div className="mt-4 text-center">
            <p className="text-sm text-muted-foreground">
              مورد اعتماد بیش از ۵۰٬۰۰۰ متخصص در سراسر جهان
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Download3 };