import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";

interface CardHeadingProps {
  title: string;
  subtitle?: string;
  titleClassName?: string;
  subtitleClassName?: string;
  wrapperClassName?: string;
}

export function CardHeading({
  title,
  subtitle,
  titleClassName = "",
  subtitleClassName = "",
  wrapperClassName = "",
}: CardHeadingProps) {
  return (
    <div className={`mb-5 ${wrapperClassName}`}>
      {subtitle && (
        <div
          className={`aiero-subheading ${subtitleClassName}`}
          style={{ fontFamily: "var(--font-sora)" }}
        >
          {subtitle}
        </div>
      )}
      <h4
        className={`tracking-[-0.03em] ${titleClassName}`}
        style={{
          fontFamily: "var(--font-dm-sans)",
          fontSize: "30px",
          fontWeight: 500,
          lineHeight: "1.16666em",
        }}
      >
        {title}
      </h4>
    </div>
  );
}

export function IconButton({ className = "" }: { className?: string }) {
  return (
    <div className={`absolute bottom-0 right-0 icon-decoration ${className}`}>
      <div className="icon-inner flex h-[52px] w-[52px] items-center justify-center rounded-tl-[30px] bg-white text-[#333333] transition-colors hover:bg-[#333333] hover:text-white">
        <ArrowIcon className="h-3 w-3" />
      </div>
    </div>
  );
}