"use client";

import { ArrowRight, Check, Copy, Download } from "lucide-react";
import { useState } from "react";
import { FaWindows } from "react-icons/fa";

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

interface Download13Props {
  className?: string;
}

const Download13 = ({ className }: Download13Props) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText("winget install Example.App");
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <span className="mx-auto grid size-28 place-items-center rounded-4xl bg-primary p-4 md:size-32">
          <img
            src="/block-media/shadcnblocks/block/block-1.svg"
            alt="لوگو"
            className="size-16 invert dark:invert-0"
          />
        </span>
        <h1 className="mt-10 text-center text-xl font-semibold md:text-2xll">
          دانلود اپلیکیشن دسکتاپ
        </h1>
        <p className="mx-auto mt-4 max-w-5xl text-center text-muted-foreground md:mt-6 md:text-xl">
          با نسخه دسکتاپ، بهره‌وری بی‌درنگ را تجربه کنید. به‌روزرسانی خودکار و پشتیبانی چندپلتفرمی در چند دقیقه شروع کنید.
        </p>
        <div className="mt-10 flex flex-col items-center gap-4 md:mt-20">
          <FaWindows className="size-14" />
          <Button className="inline-flex items-center gap-2">
            دانلود برای <span dir="rtl">Windows</span>
            <Download />
          </Button>
          <div
            className="flex items-center gap-1.5 rounded-lg border py-1 ps-4 pe-2"
            dir="rtl"
          >
            <span className="font-mono text-sm">
              winget install Example.App
            </span>
            <Button
              variant="link"
              size="icon"
              onClick={handleCopy}
              className="relative"
            >
              <span
                className={`absolute inset-0 grid place-items-center transition-all duration-250 ${
                  copied
                    ? "scale-75 opacity-0 blur-xs"
                    : "blur-0 scale-100 opacity-100"
                }`}
              >
                <Copy />
              </span>
              <span
                className={`absolute inset-0 grid place-items-center transition-all duration-250 ${
                  copied
                    ? "blur-0 scale-100 opacity-100"
                    : "scale-75 opacity-0 blur-xs"
                }`}
              >
                <Check className="text-emerald-600" />
              </span>
            </Button>
          </div>
          <a
            href="#"
            className="flex items-center gap-1 text-xs text-muted-foreground hover:underline"
          >
            روش‌های نصب دیگر
            <ArrowRight className="size-3 rtl:rotate-180" />
          </a>
          <div className="mt-10 flex flex-col items-center gap-2 md:mt-20">
            <p className="text-sm font-medium text-muted-foreground">
              همه دانلودهای ویندوز:
            </p>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm" dir="rtl">
                x64
              </Button>
              <Button variant="outline" size="sm" dir="rtl">
                Arm64
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Download13 };