import { ProjectCard } from '@/components/ui/ProjectCard'
import type { Project } from '@/types'

interface ProjectsSectionProps {
  projects: Project[]
}

export function ProjectsSection({ projects }: ProjectsSectionProps) {
  return (
    <section id="projects" className="py-32 relative">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-surface/20 to-transparent" />

      <div className="relative z-10 max-w-6xl mx-auto px-6">
        {/* Header */}
        <div className="text-center mb-16">
          <span className="text-accent font-mono text-sm tracking-widest uppercase">
            Work
          </span>
          <h2 className="font-display font-bold text-4xl md:text-5xl text-foreground mt-3">
            Featured Projects
          </h2>
          <p className="text-foreground-muted mt-4 max-w-xl mx-auto">
            Production-grade systems I've built — from concept to deployment
          </p>
        </div>

        {/* Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {projects.map((project, index) => (
            <ProjectCard key={project.id} project={project} index={index} />
          ))}
        </div>

        {/* View more */}
        <div className="text-center mt-12">
          <a
            href="https://github.com"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 px-6 py-3 border border-border hover:border-accent/40 text-foreground-muted hover:text-foreground rounded-xl transition-all hover:-translate-y-0.5 duration-200"
          >
            View All on GitHub
          </a>
        </div>
      </div>
    </section>
  )
}