"use client";

import {
  ChevronLeft,
  ChevronRight,
  Copy,
  Plus,
  RotateCw,
  Share,
} from "lucide-react";
import React from "react";

import { AvatarGroup } from "@/components/shadcnblocks/avatar-group";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { useGoogleFont } from "@/hooks/use-google-font";
import { cn } from "@/lib/utils";

interface Hero206Props {
  className?: string;
}

const Hero206 = ({ className }: Hero206Props) => {
  useGoogleFont("Antonio");
  return (
    <section
      className={cn("bg-background", className)}
      style={{ "--font-antonio": "Antonio, sans-serif" } as React.CSSProperties}
    >
      <div className="relative container py-32">
        <header className="mx-auto max-w-3xl text-center">
          <h1 className="font-antonio text-2xll font-semibold text-foreground uppercase md:text-2xll">
            کتابخانه کامپوننت <br /> آماده استفاده در پروژه
                                </h1>
          <p className="my-7 max-w-3xl font-sans tracking-tight text-muted-foreground md:text-xl">
            کامپوننت‌های استاندارد را تنها با چند دستور به پروژه خود اضافه کنید و بدون وابستگی اضافی توسعه را آغاز کنید.
                                </p>
        </header>

        <Badge
          variant="outline"
          className="mx-auto mt-10 flex h-auto cursor-pointer gap-3 p-1.5 pe-4 text-base font-normal transition-all ease-in-out hover:gap-4"
        >
          <AvatarGroup spacing="tight" className="h-auto">
            <Avatar className="size-8 border-2 border-background md:size-10">
              <AvatarImage
                src="/block-media/shadcnblocks/block/avatar-2.webp"
                alt="آواتار"
              />
              <AvatarFallback>AB</AvatarFallback>
            </Avatar>
            <Avatar className="size-8 border-2 border-background md:size-10">
              <AvatarImage
                src="/block-media/shadcnblocks/block/avatar-5.webp"
                alt="آواتار"
              />
              <AvatarFallback>AB</AvatarFallback>
            </Avatar>
            <Avatar className="size-8 border-2 border-background md:size-10">
              <AvatarImage
                src="/block-media/shadcnblocks/block/avatar-6.webp"
                alt="آواتار"
              />
              <AvatarFallback>AB</AvatarFallback>
            </Avatar>
          </AvatarGroup>
          <p className="tracking-tight capitalize md:text-lg">
            مورد اعتماد بیش از{" "}
            <span className="font-bold text-foreground">۱۰٬۰۰۰</span> کاربر.
          </p>
        </Badge>

        <div className="relative mt-12 flex h-full w-full flex-col items-center justify-center">
          <BrowserMockup
            className="w-full"
            url="https://ShadcnBlocks/block/hero206"
            DahboardUrlDesktop="/block-media/shadcnblocks/block/dashboard/dashboard-1.png"
            DahboardUrlMobile="/block-media/shadcnblocks/block/dashboard/dashboard-mobile-1.png"
          />
          <div className="absolute bottom-0 h-2/3 w-full bg-linear-to-t from-white to-transparent" />
        </div>
      </div>
    </section>
  );
};

export { Hero206 };

const BrowserMockup = ({
  className = "",
  url = "https://ShadcnBlocks/block/hero206",
  DahboardUrlDesktop = "/block-media/shadcnblocks/block/dashboard/dashboard-1.png",
  DahboardUrlMobile = "/block-media/shadcnblocks/block/dashboard/dashboard-mobile-1.png",
}) => (
  <div
    className={cn(
      "relative w-full overflow-hidden rounded-4xl border",
      className,
    )}
  >
    <div className="flex items-center justify-between gap-10 bg-muted px-8 py-4 lg:gap-25">
      <div className="flex items-center gap-2">
        <div className="size-3 rounded-full bg-red-500" />
        <div className="size-3 rounded-full bg-yellow-500" />
        <div className="size-3 rounded-full bg-green-500" />
        <div className="ms-6 hidden items-center gap-2 opacity-40 lg:flex">
          <ChevronLeft className="size-5 rtl:rotate-180" />
          <ChevronRight className="size-5 rtl:rotate-180" />
        </div>
      </div>
      <div className="flex w-full items-center justify-center">
        <p className="relative hidden w-full rounded-full bg-background px-4 py-1 text-center text-sm tracking-tight md:block">
          {url}
          <RotateCw className="absolute top-2 right-3 size-3.5" />
        </p>
      </div>

      <div className="flex items-center gap-4 opacity-40">
        <Share className="size-4" />
        <Plus className="size-4" />
        <Copy className="size-4" />
      </div>
    </div>

    <div className="relative w-full">
      <img
        src={DahboardUrlDesktop}
        alt="تصویر نمونه"
        className="object-cove hidden aspect-video h-full w-full object-top md:block"
      />
      <img
        src={DahboardUrlMobile}
        alt="تصویر نمونه"
        className="block h-full w-full object-cover md:hidden"
      />
    </div>
    <div className="absolute bottom-0 z-10 flex w-full items-center justify-center bg-muted py-3 md:hidden">
      <p className="relative flex items-center gap-2 rounded-full px-8 py-1 text-center text-sm tracking-tight">
        {url}
      </p>
    </div>
  </div>
);