"use client";

import Image from "next/image";
import Link from "next/link";
import { ChevronLeft } from "lucide-react";
import { Badge } from "@/components/ui/badge";

interface AdvantageDetailMainProps {
  advantage: {
    id: string;
    title: string;
    description: string;
    detailTitle: string;
    detailImageUrl: string;
    detailItems: string[];
    order: number;
  };
}

const AdvantageDetailMain = ({ advantage }: AdvantageDetailMainProps) => {
  return (
    <div className="min-h-screen bg-gradient-to-b from-[#1656e2] to-[#0c2f7c] pt-[120px] pb-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
        {/* Back Button */}
        <Link
          href="/sunat-racing"
          className="inline-flex items-center gap-2 text-white/80 hover:text-white transition-colors"
        >
          <ChevronLeft className="h-5 w-5" />
          <span className="font-medium">Kembali ke Sunat Racing</span>
        </Link>

        {/* Main Content */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Left Side - Title and Image */}
          <div className="space-y-8">
            <div>
              <Badge className="bg-white/20 text-white hover:bg-white/30 mb-4">
                Keunggulan
              </Badge>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight whitespace-pre-line">
                {advantage.detailTitle}
              </h1>
            </div>
            <div className="relative aspect-[557/508] rounded-[15px] overflow-hidden">
              <Image
                src={advantage.detailImageUrl}
                alt={advantage.title}
                fill
                className="object-cover"
              />
            </div>
          </div>

          {/* Right Side - Detail Items */}
          <div className="space-y-8">
            {advantage.detailItems.map((item, index) => (
              <div key={`${advantage.id}-item-${index}`} className="flex gap-5">
                <div className="flex-shrink-0 w-12 h-14 bg-white/20 rounded-lg flex items-center justify-center">
                  <span className="text-2xl font-bold text-white">{index + 1}</span>
                </div>
                <div className="flex-1">
                  <p className="text-white/90 text-lg leading-relaxed">
                    {item}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default AdvantageDetailMain;