import Image from "next/image";

interface Tag {
  name: string;
  bgColor: string;
  textColor: string;
}

interface BeritaDetailHeaderSectionProps {
  title: string;
  publishedAt: string;
  author: string;
  address: string;
  tags: Tag[];
  heroImage: string;
}

const BeritaDetailHeaderSection = ({
  title,
  publishedAt,
  author,
  address,
  tags,
  heroImage,
}: BeritaDetailHeaderSectionProps) => {
  return (
    <section className="bg-white px-6 py-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col items-center gap-4">
          {/* Meta Info */}
          <div className="flex items-center gap-2.5 text-[20px] text-[#232323]">
            <span className="font-medium">{publishedAt}</span>
            <div className="w-5 h-5 rounded-full bg-[#003dd8]">
              <div className="w-full h-full rounded-full bg-current opacity-100" />
            </div>
            <span className="font-normal">{author}</span>
          </div>

          {/* Title */}
          <h1 className="font-semibold text-[46px] text-[#003dd8] leading-tight tracking-tight text-center max-w-325.25">
            {title}
          </h1>

          {/* Address */}
          <p className="font-medium text-[25px] text-[#2b2b2b] text-center">
            {address}
          </p>

          {/* Tags */}
          <div className="flex gap-2.5 flex-wrap justify-center">
            {tags.map((tag, index) => (
              <span
                key={index}
                className="px-4 py-2.5 rounded-[17px] font-medium text-[18px] tracking-[-0.9px] text-center"
                style={{
                  backgroundColor: tag.bgColor,
                  color: tag.textColor,
                }}
              >
                {tag.name}
              </span>
            ))}
          </div>

          {/* Hero Image */}
          <div className="relative w-full max-w-328 h-154 rounded-4xl overflow-hidden shadow-lg mt-4">
            <Image
              src={heroImage}
              alt={title}
              fill
              className="object-cover"
              priority
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default BeritaDetailHeaderSection;