import ArrowRight from "@/components/Icons/ArrowRight"
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"

import styles from "./header.module.css"

import type { HeaderProps } from "@/types/components/myPages/header"

export default function SectionHeader({
  link,
  subtitle,
  title,
  topTitle = false,
}: HeaderProps) {
  return (
    <header className={styles.header}>
      <Title
        as={topTitle ? "h2" : "h3"}
        className={styles.title}
        level={topTitle ? "h1" : "h2"}
      >
        {title}
      </Title>
      {subtitle && <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>}
      {link ? (
        <span className={styles.linkWrapper}>
          <ArrowRight color="burgundy" className={styles.icon} />
          <Link
            className={styles.link}
            color="burgundy"
            href={link.href}
            variant="myPage"
          >
            {link.text}
          </Link>
        </span>
      ) : null}
    </header>
  )
}