import Badge from "../components/ui/Badge";
import Button from "../components/ui/Button";

interface CommonBannerProps {
  badge?: string;
  title: string;
  description?: string;
  mission?: string;
  buttonText?: string;
  className?: string;
}

export default function CommonBanner({
  badge,
  title,
  description,
  mission,
  buttonText,
  className = "",
}: CommonBannerProps) {
  return (
    <section
      className={`
        relative
        pt-36 pb-8
        sm:pt-40 sm:pb-8
        md:pt-48 md:pb-section
        2xl:pt-56
        ${className}
      `}
    >
      <div className="container-k relative z-10 text-center">
        {badge && <Badge>{badge}</Badge>}

        <h1
          className="
            mx-auto mt-4 max-w-4xl
            font-heading text-3xl font-medium leading-tight
            sm:mt-6
            lg:text-4xl
            2xl:mt-10
            2xl:text-[50px]
            2xl:leading-16
          "
          dangerouslySetInnerHTML={{ __html: title }}
        />

        {description && (
          <p
            className="
              mx-auto mt-5 max-w-[816px]
              text-base leading-7 text-text
              xl:text-xl
            "
          >
            {description}
          </p>
        )}

        {mission && (
          <div
            className="
              mx-auto mt-10 inline-block
              rounded-full border border-badge
              bg-white px-8 py-4
              text-base font-medium italic text-link-1
              lg:text-xl
            "
          >
            {mission}
          </div>
        )}

        {buttonText && (
          <Button className="mt-10">
            {buttonText}
          </Button>
        )}
      </div>
    </section>
  );
}