import { memo } from "react";

interface YearsOfExcellenceProps {
  years: string | number;
  subtitle: string;
  /** Plain-text lines when `taglineHtml` is not used */
  title?: string[];
  /** CMS HTML tagline (e.g. `<br />`); takes precedence over `title` */
  taglineHtml?: string;
  className?: string;
}

const YearsOfExcellence = ({
  years,
  subtitle,
  title = [],
  taglineHtml,
  className = "",
}: YearsOfExcellenceProps) => {
  return (
    <div className={`pb-10 text-left flex flex-col gap-2 ${className}`}>
      <h2 className="font-normal text-[36px] md:text-[90px] text-[#28241E] font-times-sans leading-[110%] tracking-normal mb-0">
        {years}
      </h2>
      <p className="font-creato font-light text-[18px] leading-[110%] tracking-normal mt-0 mb-0">
        {subtitle}
      </p>
      {taglineHtml?.trim() ? (
        <p
          className="font-creato font-light text-[24px] leading-relaxed tracking-wider mt-0"
          dangerouslySetInnerHTML={{ __html: taglineHtml.trim() }}
        />
      ) : (
        title.map((line, index) => (
          <p
            key={index}
            className="font-creato font-light text-[24px] leading-relaxed tracking-wider mt-0"
          >
            {line}
          </p>
        ))
      )}
    </div>
  );
};

export default memo(YearsOfExcellence);