import { developments } from "../data";
import { Action, SectionHeading } from "./Primitives";
import "./Gallery.css";

const textures = [
  "/images/refined/gallery/Gemini_Generated_Image_gwchf4gwchf4gwch.jpeg",
  "/images/refined/gallery/Gemini_Generated_Image_n36uden36uden36u.jpeg",
  "/images/refined/gallery/Gemini_Generated_Image_v9lfrwv9lfrwv9lf.jpeg",
  "/images/library/gallery-01.jpeg",
  "/images/library/gallery-02.jpeg",
  "/images/library/gallery-03.jpeg",
  "/images/library/gallery-04.jpeg",
];

export default function Gallery({ preview = false }) {
  const items = preview ? developments.slice(0, 3) : developments;
  return (
    <section
      className={`gallery${preview ? " gallery--preview" : ""}`}
      id="developments"
      tabIndex={-1}
    >
      <SectionHeading
        centered
        label={
          preview ? "Featured fabric developments" : "Selected developments"
        }
        title={
          preview ? (
            <>
              What we make.
              <br />
              <em>What we can develop.</em>
            </>
          ) : (
            <>
              From grey
              <br />
              <em>to possibility.</em>
            </>
          )
        }
      >
        <p className="gallery__intro">
          {preview
            ? "A selection of knitted structures showing how yarn, composition and machine setup shape the final fabric character."
            : "Selected developments are processed separately as samples to explore how a construction can translate after dyeing and finishing. RRS commercially manufactures grey fabric only."}
        </p>
        {preview && (
          <Action to="/fabrics#developments" variant="outline">
            Explore all fabrics
          </Action>
        )}
      </SectionHeading>
      <div className="gallery__grid">
        {items.map((name, index) => (
          <article className="sample" key={name}>
            <div className="sample__visual">
              <img
                className="sample__image"
                src={textures[index]}
                alt={`${name} fabric sample`}
                width="1600"
                height="1200"
                loading="lazy"
              />
            </div>
            <div className="sample__heading">
              <h3 className="sample__name">{name}</h3>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}