"use client";

import { useState } from "react";
import Image from "next/image";
import { ArrowRight } from "lucide-react";
import Link from "next/link";

const tabs = ["INSTAGRAM", "TIKTOK", "FACEBOOK", "YOUTUBE"];

const instagramPosts = ["/ig1-new.png", "/ig2-new.png", "/ig3-new.png"];
const tiktokPosts = ["/tk1.png", "/tk2.png", "/tk3.png"];
const youtubePosts = ["/tk1.png", "/tk2.png", "/tk3.png"];
const facebookPosts = ["/tk1.png", "/tk2.png", "/tk3.png"];

export default function SosmedSection() {
  const [activeTab, setActiveTab] = useState("INSTAGRAM");

  return (
    <section className="px-4 py-16 max-w-[1400px] mx-auto">
      <h2 className="text-3xl font-bold mb-6 text-center">Sosial Media Kami</h2>

      <div className="flex flex-wrap gap-4 items-center justify-center mb-8">
        {tabs.map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`text-sm font-medium px-4 py-2 rounded-full ${
              activeTab === tab
                ? "bg-[#BCD4DF] text-sky-700"
                : "text-[gray-700] hover:bg-gray-100"
            }`}
          >
            {tab}
          </button>
        ))}
      </div>

      {activeTab === "INSTAGRAM" && (
        <>
          <div className="flex flex-wrap justify-center items-center gap-4">
            {instagramPosts.map((img, i) => (
              <div
                key={i}
                className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
              >
                <Image
                  src={img}
                  alt={`Instagram post ${i + 1}`}
                  fill
                  className="w-full h-full object-cover"
                />
              </div>
            ))}
          </div>

          <div className="flex justify-center mt-10">
            <Link href={"https://www.instagram.com/jaecoo_cihampelasbdg"}>
              <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
                Lihat Selengkapnya
                <ArrowRight size={35} />
              </button>
            </Link>
          </div>
        </>
      )}

      {activeTab === "TIKTOK" && (
        <>
          <div className="flex flex-wrap justify-center items-center gap-4">
            {tiktokPosts.map((img, i) => (
              <div
                key={i}
                className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
              >
                <Image
                  src={img}
                  alt={`Tiktok post ${i + 1}`}
                  fill
                  className="w-full h-full object-cover"
                />
              </div>
            ))}
          </div>

          <div className="flex justify-center mt-10">
            <Link href={"https://www.tiktok.com/@jaecoo.cihampelasbdg"}>
              <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
                Lihat Selengkapnya
                <ArrowRight size={35} />
              </button>
            </Link>
          </div>
        </>
      )}

      {activeTab === "FACEBOOK" && (
        <>
          <div className="flex flex-wrap justify-center items-center gap-4">
            {facebookPosts.map((img, i) => (
              <div
                key={i}
                className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
              >
                <Image
                  src={img}
                  alt={`Facebook post ${i + 1}`}
                  fill
                  className="w-full h-full object-cover"
                />
              </div>
            ))}
          </div>

          <div className="flex justify-center mt-10">
            <Link href={"#"}>
              <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
                Lihat Selengkapnya
                <ArrowRight size={35} />
              </button>
            </Link>
          </div>
        </>
      )}

      {activeTab === "YOUTUBE" && (
        <>
          <div className="flex flex-wrap justify-center items-center gap-4">
            {youtubePosts.map((img, i) => (
              <div
                key={i}
                className="relative w-full sm:w-[300px] md:w-[350px] lg:w-[400px] h-[400px] sm:h-[450px] md:h-[500px]"
              >
                <Image
                  src={img}
                  alt={`YouTube post ${i + 1}`}
                  fill
                  className="w-full h-full object-cover"
                />
              </div>
            ))}
          </div>

          <div className="flex justify-center mt-10">
            <Link href={"#"}>
              <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
                Lihat Selengkapnya
                <ArrowRight size={35} />
              </button>
            </Link>
          </div>
        </>
      )}
    </section>
  );
}