import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
import styles from "./CardShared.module.css";

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 font-sora ${subtitleClassName}`}
        >
          {subtitle}
        </div>
      )}
      <h4
        className={`font-dm-sans text-[30px] font-medium leading-[1.16666em] tracking-[-0.03em] ${titleClassName}`}
      >
        {title}
      </h4>
    </div>
  );
}

export function IconButton({ className = "" }: { className?: string }) {
  return (
    <div className={`${styles.iconWrapper} ${className}`}>
      <a
        href="#"
        className={`${styles.iconSlideAslant} flex h-[52px] w-[52px] items-center justify-center rounded-[15px] bg-aiero-card-dark text-white transition-all duration-300 hover:bg-aiero-teal hover:text-aiero-dark`}
        aria-label="Open details"
      >
        <span className={styles.iconSlideAslantInner} aria-hidden="true">
          <ArrowIcon className="h-3 w-3" />
          <ArrowIcon className="h-3 w-3" />
        </span>
      </a>
    </div>
  );
}