"use client";

import React from "react";

interface KopSuratResmiProps {
  className?: string;
  subTitle?: string;
  documentTitle?: string;
  documentMeta?: string;
}

export const KopSuratResmi: React.FC<KopSuratResmiProps> = ({
  className = "",
  subTitle,
  documentTitle,
  documentMeta,
}) => {
  return (
    <div className={`w-full overflow-hidden select-none ${className}`}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src="/images/kop-surat-bpi.png"
        alt="Kop Surat Resmi Yayasan BPI - SMA BPI 1 Bandung"
        className="w-full h-auto object-contain block mx-auto"
      />

      {(documentTitle || subTitle || documentMeta) && (
        <div className="text-center mt-3 space-y-0.5">
          {documentTitle && (
            <h2 className="text-sm font-bold uppercase text-slate-900 tracking-wider">
              {documentTitle}
            </h2>
          )}
          {subTitle && (
            <p className="text-xs font-semibold text-slate-700">
              {subTitle}
            </p>
          )}
          {documentMeta && (
            <p className="text-[10px] text-slate-500">
              {documentMeta}
            </p>
          )}
        </div>
      )}
    </div>
  );
};