"use client";

import { motion } from "framer-motion";

import { cn } from "@/lib/utils";

interface Hero201Props {
  className?: string;
  smallTitle?: string;
  mainTitle?: string;
  description?: string;
}

const Hero201 = ({
  className,
  smallTitle = "Just Copy Paste",
  mainTitle = "Amazing components",
  description = "Discover our collection of beautifully designed, ready-to-use components that you can easily integrate into your projects.",
}: Hero201Props) => {
  return (
    <section className={cn("py-16 md:py-24 lg:py-32", className)} dir="rtl">
      <div className="relative container mx-auto flex flex-col items-center overflow-hidden px-6">
        {/* دایره‌های تزئینی پشت متن تا لرزش ایجاد نکنند */}
        <div className="pointer-events-none absolute inset-0 z-0 hidden overflow-hidden md:block" aria-hidden>
          <motion.div
            initial={{ opacity: 0, scale: 0.6 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ ease: "easeInOut", duration: 0.6 }}
            className="absolute -top-80 -right-80 h-240 w-240 will-change-transform"
            style={{ contain: "layout paint" }}
          >
            <img
              className="h-full w-full rotate-12 opacity-30 dark:invert animate-[spin_15s_linear_infinite]"
              src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
              alt=""
            />
          </motion.div>
          <motion.div
            initial={{ opacity: 0, scale: 0.6 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ ease: "easeInOut", duration: 0.6 }}
            className="absolute -bottom-80 -left-80 h-240 w-240 will-change-transform"
            style={{ contain: "layout paint" }}
          >
            <img
              className="h-full w-full rotate-12 opacity-30 dark:invert animate-[spin_15s_linear_infinite]"
              src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/illustrations/tokyo-solar-system-around-a-smiley.svg"
              alt=""
            />
          </motion.div>
        </div>

        <div className="relative z-10 flex flex-col items-center">
          <p className="text-heading-5 mb-4 text-center font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
            {smallTitle}
          </p>

          <h2 className="text-heading-2 mx-auto max-w-4xl text-center font-bold leading-[var(--line-height-heading)] tracking-tight text-foreground">
            {mainTitle}
          </h2>

          <p className="text-body mx-auto mt-6 max-w-3xl text-center leading-[var(--line-height-body)] text-muted-foreground">
            {description}
          </p>
        </div>
      </div>
    </section>
  );
};

export { Hero201 };