"use client"

import Link from "next/link"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { cn } from "@/lib/utils"

interface Section {
  id: string
  name: string
  category: string
}

interface SectionNavigationProps {
  currentSection: Section
  previousSection: Section | null
  nextSection: Section | null
}

export function SectionNavigation({ currentSection, previousSection, nextSection }: SectionNavigationProps) {
  return (
    <div
      className={cn(
        "bg-background-primary",
        "px-4", // Mobile: 1rem padding on left and right
        "md:px-8", // Medium: 2rem padding
        "lg:px-12", // Large: 3rem padding
      )}
    >
      <Separator />
      <div className="py-8">
        <div className="w-full">
          <div className="flex items-center justify-between">
            {/* Previous Section */}
            <div className="flex-1">
              {previousSection ? (
                <Link href={`/${previousSection.id}`}>
                  <Button variant="secondary" className="group flex items-center gap-2 px-4">
                    <ChevronLeft className="h-4 w-4 group-hover:-translate-x-1 transition-transform" />
                    <span className="font-medium">{previousSection.name}</span>
                  </Button>
                </Link>
              ) : (
                <div /> // Empty div to maintain layout
              )}
            </div>

            {/* Next Section */}
            <div className="flex-1 flex justify-end">
              {nextSection ? (
                <Link href={`/${nextSection.id}`}>
                  <Button variant="secondary" className="group flex items-center gap-2 px-4">
                    <span className="font-medium">{nextSection.name}</span>
                    <ChevronRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                  </Button>
                </Link>
              ) : (
                <div /> // Empty div to maintain layout
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}