import React, { useState } from "react"
import styles from "./Portfolio.module.css"
import { LuMousePointerClick } from "react-icons/lu";

interface PortfolioItem {
  href: string
  src: string
  alt: string
  // Optional per-item styling (prefer Tailwind utility classes in className/imgClassName)
  className?: string
  imgClassName?: string
  style?: React.CSSProperties
  imgStyle?: React.CSSProperties
}

const portfolioItems: PortfolioItem[] = [
  {
    href: "https://davo1.cz",
    src: "/portfolio/davo1.png",
    alt: "davo1.cz logo",
    imgClassName: "bg-black rounded-lg p-4",
    //className: "bg-white/5 rounded-lg p-4",
  },
  {
    href: "https://perlica.cz",
    src: "/portfolio/perlica.png",
    alt: "Perlica logo",
    imgClassName: "rounded-lg", 
    // imgClassName: "max-h-12",
  },
  {
    href: "http://epinger2.cz",
    src: "/portfolio/epinger.png",
    alt: "Epinger2 logo",
    imgClassName: "bg-white rounded-lg",
    // imgClassName: "max-h-12",
  },
]

export default function Portfolio() {
  const [doorOpen, setDoorOpen] = useState(false)

  const toggleDoor = () => setDoorOpen((prev) => !prev)

  return (
    <div className={styles.portfolio} id="portfolio">
      <header>
        <h1>Portfolio</h1>
      </header>

      <div>

        <span
          className={
            doorOpen
              ? `${styles.door} ${styles["door-open"]}`
              : styles.door
          }
          onClick={toggleDoor}
        >
          <LuMousePointerClick/>
        </span>

        {portfolioItems.map((item, index) => (
          <article
            key={index}
            className={`${styles.article} ${item.className ?? ""}`}
            style={item.style}
          >
            <header>
              <a href={item.href} target="_blank" rel="noopener noreferrer">
                <img
                  src={item.src}
                  alt={item.alt}
                  className={item.imgClassName}
                  style={item.imgStyle}
                />
              </a>
            </header>
            <main></main>
          </article>
        ))}
      </div>
    </div>
  )
}
