"use client";

import Link from "next/link";
import { motion } from "framer-motion";

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

import { Button } from "@/components/ui/button";
import { useContent } from "@/components/layout/content-provider";

interface ButtonItem {
  text: string;
  url: string;
}

interface Hero247Props {
  heading?: string;
  description?: string;
  secondaryButton?: ButtonItem;
  primaryButton?: ButtonItem;
  className?: string;
}

const Hero247 = ({
  className,
  heading,
  description,
  secondaryButton: secondaryButtonProp,
  primaryButton: primaryButtonProp,
}: Hero247Props) => {
  const content = useContent()
  const defaults = content.pages.home.hero247
  const headingText = heading ?? defaults.heading
  const descriptionText = description ?? defaults.description
  const secondaryButton = secondaryButtonProp ?? { text: defaults.secondaryButton, url: "#rahavarha" }
  const primaryButton = primaryButtonProp ?? { text: defaults.primaryButton, url: "#mozakerat" }
  return (
    <section className={cn("py-32", className)} dir="rtl">
      <div className="container mx-auto flex flex-col items-center px-6">
        <div className="flex flex-col items-center gap-6">
          <motion.h2
            initial={{ y: 100, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{
              duration: 1.5,
              ease: [0.16, 1, 0.3, 1],
            }}
            className="text-heading-2 max-w-3xl text-center font-semibold text-foreground dark:text-foreground"
          >
            {headingText}
          </motion.h2>
          <motion.p
            initial={{ y: 60, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{
              duration: 1.2,
              ease: [0.16, 1, 0.3, 1],
              delay: 0.2,
            }}
            className="text-body max-w-2xl whitespace-pre-line text-center leading-relaxed text-muted-foreground dark:text-muted-foreground"
          >
            {descriptionText}
          </motion.p>
          <div className="flex flex-col gap-4 font-medium md:flex-row md:gap-4">
            <motion.div
              initial={{ opacity: 0, y: 60 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{
                duration: 1.2,
                ease: [0.16, 1, 0.3, 1],
                delay: 0.25,
              }}
            >
              <Button asChild size="lg" variant="primary">
                <Link href={primaryButton.url}>{primaryButton.text}</Link>
              </Button>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 60 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{
                duration: 1.2,
                ease: [0.16, 1, 0.3, 1],
                delay: 0.4,
              }}
            >
              <Button asChild size="lg" variant="secondary">
                <Link href={secondaryButton.url}>{secondaryButton.text}</Link>
              </Button>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero247 };