import { Download, Monitor, Shield, Users, Zap } from "lucide-react";

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

interface Download4Props {
  heading?: string;
  description?: string;
  version?: string;
  fileSize?: string;
  features?: string[];
  downloadButton?: {
    text: string;
    url: string;
  };
  learnMoreButton?: {
    text: string;
    url: string;
  };
  className?: string;
}

const Download4 = ({
  heading = "مجموعه حرفه‌ای دسکتاپ",
  description =
    "اپلیکیشن کامل دسکتاپ را با امکانات سطح سازمانی و دسترسی نامحدود دانلود کنید.",
  version = "نسخه ۳.۲۱",
  fileSize = "۲۳۰ مگابایت",
  features = [
    "تحلیل و گزارش‌گیری پیشرفته",
    "امنیت و رمزنگاری سطح سازمانی",
    "مدیریت نامحدود پروژه",
    "پشتیبانی اولویت‌دار ۲۴/۷",
  ],
  downloadButton = {
    text: "دانلود رایگان",
    url: "#",
  },
  learnMoreButton = {
    text: "مستندات",
    url: "#",
  },
  className,
}: Download4Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-muted/30 py-32", className)}
    >
      <div className="container">
        <div className="mx-auto max-w-4xl">
          <div className="mb-12 text-center">
            <Badge variant="secondary" className="mb-4">
              آخرین نسخه
            </Badge>
            <h2 className="mb-4 text-xl font-bold tracking-tight sm:text-2xll lg:text-2xll">
              {heading}
            </h2>
            <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
              {description}
            </p>
          </div>

          <Card className="border bg-background p-0 shadow-lg">
            <div className="grid gap-8 p-8 lg:grid-cols-2 lg:items-center">
              <div>
                <div className="mb-6 flex items-center gap-4">
                  <div>
                    <h3 className="text-xl font-bold">اپلیکیشن دسکتاپ</h3>
                    <p className="text-muted-foreground" dir="rtl">
                      Windows • macOS • Linux
                    </p>
                  </div>
                </div>

                <div className="space-y-3">
                  {features.map((feature, index) => {
                    const icons = [Shield, Zap, Users, Monitor];
                    const Icon = icons[index % icons.length];
                    return (
                      <div key={index} className="flex items-center gap-3">
                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted">
                          <Icon className="h-4 w-4 text-foreground" />
                        </div>
                        <span className="text-sm font-medium">{feature}</span>
                      </div>
                    );
                  })}
                </div>
              </div>

              <div className="lg:ps-8">
                <div className="rounded-2xl border bg-muted/50 p-6">
                  <div className="mb-6 text-center">
                    <div className="mb-2 flex items-center justify-center gap-4">
                      <span className="text-xl font-bold">{version}</span>
                      <span className="text-muted-foreground">•</span>
                      <span className="font-medium text-muted-foreground">
                        {fileSize}
                      </span>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      آخرین نسخه پایدار
                    </p>
                  </div>

                  <div className="space-y-3">
                    <Button size="lg" className="w-full" 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="w-full"
                      asChild
                    >
                      <a href={learnMoreButton.url}>{learnMoreButton.text}</a>
                    </Button>
                  </div>

                  <div className="mt-4 text-center">
                    <p className="text-xs text-muted-foreground">
                      بدون ثبت‌نام • دانلود فوری • ۳۰ روز آزمایشی
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </Card>

          <div className="mt-8 text-center">
            <p className="text-sm text-muted-foreground">
              بیش از ۱۰۰٬۰۰۰ تیم از اپلیکیشن دسکتاپ ما استفاده می‌کنند
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Download4 };