import { ChevronRight, ChevronLeft } from "lucide-react"

export function SectionBadge({
  label,
  variant = "white",
  icon = "/assets/safl/badge-star.svg",
}: {
  label: string
  variant?: "white" | "gray"
  icon?: string
}) {
  return (
    <div
      className={`inline-flex items-center gap-2 px-6 py-3 rounded-[66px] max-w-fit ${
        variant === "gray" ? "bg-[#ebebeb]" : "bg-white"
      }`}
    >
      {icon ? (
        <img src={icon} alt="" loading="lazy" className="w-[17px] h-[16px]" />
      ) : null}
      <span className="font-accent text-[#20262b] text-[16px] leading-none uppercase">
        {label}
      </span>
    </div>
  )
}

export function ArrowButton({
  direction,
  disabled = false,
  onClick,
}: {
  direction: "left" | "right"
  disabled?: boolean
  onClick?: () => void
}) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`w-[44px] h-[44px] lg:w-[58px] lg:h-[58px] rounded-full border-2 border-[#d20010] flex items-center justify-center transition-all active:scale-95 ${
        disabled ? "opacity-30 cursor-not-allowed" : "opacity-100 hover:opacity-80"
      }`}
    >
      {direction === "left" ? (
        <ChevronLeft size={24} strokeWidth={1.5} className="text-[#d20010]" />
      ) : (
        <ChevronRight size={24} strokeWidth={1.5} className="text-[#d20010]" />
      )}
    </button>
  )
}