export type HelpSolutionsData = {
  helpSubtitle?: string | null;
  helpTitle?: string | null;
  helpItems?: {
    item1?: string | null;
    item2?: string | null;
    item3?: string | null;
    item4?: string | null;
    item5?: string | null;
    item6?: string | null;
  } | null;
};


type Props = {
  data: HelpSolutionsData;
};

export default function HelpSolutions({ data }: Props) {
   const items = [
    data.helpItems?.item1,
    data.helpItems?.item2,
    data.helpItems?.item3,
    data.helpItems?.item4,
    data.helpItems?.item5,
    data.helpItems?.item6,
  ].filter((item): item is string => typeof item === "string" && item.trim() !== "");



  return (
    <section className="bg-[#F3F3F3] pb-20 md:pb-28">
      <div className="container mx-auto px-4 text-center">

        {/* Subtitle */}
        {data.helpSubtitle && (
          <span className="block text-base tracking-widest text-[#202020]/60 mb-3">
            {data.helpSubtitle}
          </span>
        )}

        {data.helpTitle && (
          <h2 className="font-mono font-medium text-3xl md:text-4xl lg:text-4xl text-[#202020] leading-tight mb-12">
            {data.helpTitle}
          </h2>
        )}


        {/* Pills */}
        <div className="flex flex-wrap justify-center gap-4 max-w-5xl mx-auto">
          {items.map((item, index) => (
            <span
              key={index}
              className="bg-white border border-[#202020]/15 px-6 py-3 rounded text-base md:text-base text-[#202020] hover:bg-[#101010] hover:text-white transition font-medium"
            >
              {item}
            </span>
          ))}
        </div>

      </div>
    </section>
  );
}