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 pb-8 sm:pb-10 md:pb-12 2xl:pb-section
        ${className}
      `}
    >
      <div className="container-k relative z-10 text-center">
        {badge && <Badge>{badge}</Badge>}
        {title && (
          <h1
            className="
            mx-auto mt-4 max-w-4xl
            font-heading text-heading text-3xl font-medium leading-tight
            sm:mt-6
            lg:text-4xl
            2xl:mt-10
          "
            dangerouslySetInnerHTML={{ __html: title }}
          />
        )}
        {description && (
          <p
            className="
              mx-auto mt-5 max-w-204
              text-base leading-7 text-text
              xl:text-lg
            "
          >
            {description}
          </p>
        )}

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

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