import { WorkExperienceCard } from "../WorkExperienceCard"
import { workExperience } from "../../data/portfolio"
import { useSystemTheme } from "../../hooks/useSystemTheme"

interface WorkProps {
  sectionRef: (el: HTMLElement | null) => void
}

export function Work({ sectionRef }: WorkProps) {
  const isLightMode = useSystemTheme()

  return (
    <section
      id="work"
      ref={sectionRef}
      className="min-h-screen py-20 sm:py-32 opacity-0"
      style={isLightMode ? {
        backgroundColor: '#e2e2e2',
        color: 'oklch(0.2 0.02 255)'
      } : {}}
    >
      <div className="relative max-w-4xl mx-auto px-6 sm:px-8 lg:px-16">
        <img 
          src="/nekomata.png" 
          alt="" 
          className="absolute left-0 top-1/3 -translate-y-1/2 -translate-x-56 w-96 h-auto opacity-100 hidden lg:block pointer-events-none"
        />
        <div className="space-y-12 sm:space-y-16">
          <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
            <h2 className="text-3xl sm:text-4xl font-light">Selected Work</h2>
            <div
              className="text-sm font-mono"
              style={isLightMode ? {
                color: 'oklch(0.48 0.015 255)'
              } : {}}
            >
              2016 — 2025
            </div>
          </div>

          <div className="space-y-8 sm:space-y-12">
            {workExperience.map((job, index) => (
              <WorkExperienceCard key={index} {...job} />
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}