interface Project {
  title: string
  description: string
  tech: string[]
  links?: {
    live?: string
    github?: string
  }
}

interface WorkExperienceCardProps {
  year: string
  role: string
  company: string
  description: string
  tech: string[]
  projects?: Project[]
}

export function WorkExperienceCard({ year, role, company, description, tech, projects }: WorkExperienceCardProps) {
  return (
    <div className="group py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500">
      <div className="grid lg:grid-cols-12 gap-4 sm:gap-8">
        <div className="lg:col-span-2">
          <div className="text-xl sm:text-2xl font-light text-[oklch(0.48_0.015_255)] dark:text-muted-foreground dark:group-hover:text-foreground transition-colors duration-500">
            {year}
          </div>
        </div>

        <div className="lg:col-span-10 space-y-3">
          <div className="flex items-start justify-between gap-4">
            <div>
              <h3 className="text-lg sm:text-xl font-medium text-[oklch(0.2_0.02_255)] dark:text-foreground">{role}</h3>
              <div className="text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
                {company}
              </div>
            </div>
            <div className="flex flex-wrap gap-2 justify-end items-start">
              {tech.map((techItem) => (
                <span
                  key={techItem}
                  className="px-2 py-1 text-xs rounded text-[oklch(0.48_0.015_255)] dark:text-muted-foreground transition-colors duration-500"
                >
                  {techItem}
                </span>
              ))}
            </div>
          </div>
          <p className="leading-relaxed text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
            {description}
          </p>
        </div>
      </div>

      {projects && projects.length > 0 && (
        <div className="mt-6 lg:ml-[calc((2/12)*100%+2rem)] space-y-4">
          <div className="text-xs font-mono tracking-wider text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
            PROJECTS
          </div>
          <div className="space-y-4">
            {projects.map((project, index) => (
              <div
                key={index}
                className="glass glass-hover p-4 rounded-lg transition-colors duration-300"
              >
                <div className="space-y-3">
                  <div className="flex items-start justify-between gap-4">
                    <h4 className="font-medium text-md text-[oklch(0.2_0.02_255)] dark:text-foreground">{project.title}</h4>
                    {project.links && (
                      <div className="flex gap-2">
                        {project.links.github && (
                          <a
                            href={project.links.github}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="transition-colors text-[oklch(0.48_0.015_255)] dark:text-muted-foreground dark:hover:text-foreground"
                            aria-label="View on GitHub"
                          >
                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                            </svg>
                          </a>
                        )}
                        {project.links.live && (
                          <a
                            href={project.links.live}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="transition-colors text-[oklch(0.48_0.015_255)] dark:text-muted-foreground dark:hover:text-foreground"
                            aria-label="View live site"
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                              <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                            </svg>
                          </a>
                        )}
                      </div>
                    )}
                  </div>
                  <p className="text-md leading-relaxed text-[oklch(0.48_0.015_255)] dark:text-muted-foreground">
                    {project.description}
                  </p>
                  <div className="flex flex-wrap gap-2">
                    {project.tech.map((techItem) => (
                      <span
                        key={techItem}
                        className="glass glass-hover px-2 py-1 text-xs rounded text-[oklch(0.48_0.015_255)] dark:text-muted-foreground"
                      >
                        {techItem}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}