import RichText from "@/app/components/rich-text";

interface FabricFamilyFeature {
  id: number | string;
  title: string;
  description: string;
}
export default function KnowTheMaterial({ family }: { family: any }) {
  return (
    <div className="wrapper pb-16">
      <div className="flex flex-col gap-8 md:gap-16">
        <div className="flex flex-col justify-center text-center">
          <h1>Know the material</h1>
        </div>
        <div className="mx-auto flex w-full flex-col md:w-[75%]">
          <div>
            <span className="hairline-12 inline-flex h-3 w-81 bg-gray-950"></span>
          </div>
        </div>
        <div className="mx-auto flex w-full flex-col gap-20 md:w-[75%] md:gap-25">
          {family &&
            Array.isArray(family.fabric_family_features) &&
            family.fabric_family_features.length > 0 &&
            family.fabric_family_features.map(
              (item: FabricFamilyFeature, index: number) => (
                <div
                  key={`${item.id}_${index}`}
                  className="grid grid-cols-1 items-end gap-4 align-bottom md:grid-cols-2 md:gap-40"
                >
                  <div>
                    <h4>{item.title}</h4>
                  </div>
                  <div className="flex flex-col gap-4 text-sm font-light *:flex *:flex-col *:gap-4 [&_span]:font-medium">
                    {typeof window !== "undefined" && (
                      <RichText initialHtml={item.description} />
                    )}
                  </div>
                </div>
              ),
            )}
        </div>
      </div>
    </div>
  );
}