"use client";
import Image from "next/image";
import React from "react";

const OurWork = () => {
  const works = ["/work1n.png", "/work2n.png", "/work3n.png"];

  return (
    <section className="m-10 my-20">
      <div className="text-center">
        <span>Quick Getting Started</span>
        <h1 className="text-5xl font-bold bg-gradient-to-r from-emerald-500 to-emerald-900 text-transparent bg-clip-text text-center">
          Our Work
        </h1>
        <p>Our own work minded by simplicity</p>
        <div className="w-full relative mt-16 p-4 rounded-lg flex flex-wrap gap-3 justify-center">
          {works.map((e, index) => (
            <div
              key={index}
              className="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 relative"
            >
              <Image
                alt="image"
                src={e}
                fill
                // sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default OurWork;