import { ArrowIcon } from "./icons/ArrowIcon";

interface ScrollDownProps {
  href?: string;
  className?: string;
  text?: string;
  light?: boolean;
}

/**
 * ScrollDown — interactive scroll indicator.
 * Matches original tenext reference animation and styling.
 */
export function ScrollDown({
  href = "#scroll-down",
  className = "",
  text = "Scroll down",
  light = true,
}: ScrollDownProps) {
  return (
    <span className={`scroll-btn-decoration ${className}`}>
      <a
        href={href}
        className={`inline-flex h-[78px] w-[190px] items-center justify-center gap-2 rounded-b-[25px] ${
          light ? "bg-white text-tenext-dark" : "bg-tenext-dark text-white"
        } text-[14px] font-semibold no-underline transition-all hover:text-tenext-teal hover:shadow-scroll-btn`}
        style={{ fontFamily: "var(--font-sora)" }}
      >
        {text}
        <ArrowIcon className="h-3 w-3" />
      </a>
    </span>
  );
}