import { ArtComponent } from "@/components/art";
import { Rule } from "@/components/rule";
import { Art } from "@/config/Art";

const Arts = (): JSX.Element => {
  return (
    <>
      <main className="w-[95%] text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
        <h1 className="text-5xl">Art</h1>
        <section>
          <p className="mb-2">See various art depicting Naomi.</p>
          <Rule />
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-y-5">
            {Art.sort((a, b) => a.name.localeCompare(b.name)).map((art) => (
              <ArtComponent key={art.name} name={art.name} img={art.img} artist={art.artist} url={art.url} alt={art.alt}/>
            ))}
          </div>
        </section>
      </main>
    </>
  );
};

export default Arts;