import { DRIBBBLE_URL } from "@/data/designshare";
import { Reveal } from "../common/Reveal";

import Image from "next/image";

const images = [
  "/assets/recent-work/screen-1.webp",
  "/assets/recent-work/screen-2.webp",
  "/assets/recent-work/screen-3.webp",
  "/assets/recent-work/screen-4.webp",
  "/assets/recent-work/screen-5.webp",
  "/assets/recent-work/screen-6.webp",
  "/assets/recent-work/screen-7.webp",
  "/assets/recent-work/screen-8.webp",
  "/assets/recent-work/screen-9.webp",
  "/assets/recent-work/screen-10.webp",
];

function WorkCard({ src }: { src: string }) {
  return (
    <a
      className="ds-work-card"
      href={DRIBBBLE_URL}
      target="_blank"
      rel="noopener noreferrer"
      style={{
        padding: 0,
        textDecoration: "none",
        overflow: "hidden",
        display: "flex",
        aspectRatio: "1.6/1",
        position: "relative",
      }}
    >
      <Image
        src={src}
        alt="Recent work"
        fill
        sizes="(max-width: 780px) 320px, 480px"
        style={{
          objectFit: "cover",
        }}
      />
    </a>
  );
}

export function Work() {
  const doubled = [...images, ...images];

  return (
    <>
      <section
        className="ds-sec"
        id="work"
        style={{ background: "#F4EFE1", paddingBottom: 60 }}
      >
        <div className="ds-container">
          <Reveal className="ds-sec-head">
            <span className="ds-eyebrow">
              <span className="ds-eyebrow-dot" />
              Recent work
            </span>
            <h2 className="ds-h-2">
              315+ products. <span className="ds-italic">Just a few.</span>
            </h2>
          </Reveal>
        </div>
      </section>

      <div className="ds-work-strip">
        <div className="ds-work-marquee">
          {doubled.map((c, i) => (
            <WorkCard key={i} src={c} />
          ))}
        </div>
        <div className="ds-container">
          <Reveal
            style={
              {
                display: "flex",
                justifyContent: "center",
                padding: "56px 0 96px",
              } as React.CSSProperties
            }
          >
            <a
              className="ds-btn ds-portfolio-btn"
              href={DRIBBBLE_URL}
              target="_blank"
              rel="noopener noreferrer"
            >
              See the full portfolio on Dribbble
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path
                  d="M3 11L11 3M11 3H5M11 3v6"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </a>
          </Reveal>
        </div>
      </div>
    </>
  );
}