"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { CardContent } from "@/components/ui/card";
import Link from "next/link";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { config, config_p2 } from "@/lib/config";
import { getCountForLink, formatCount, FollowerCounts } from "@/lib/followers";

export function LinkCard({ counts }: { counts: FollowerCounts }) {
  const [isPage2, setIsPage2] = useState(false);
  const currentConfig = isPage2 ? config_p2 : config;

  return (
    <CardContent>
      <div key={isPage2 ? "p2" : "p1"} className="animate-in fade-in slide-in-from-bottom-2 duration-200">
        <nav aria-label="ลิ้งค์โซเชียลมีเดีย" className="flex flex-col gap-3">
          {currentConfig.links.map((item, index) => {
            const IconComponent = item.icon;

            const count = getCountForLink(item.name, counts);

            return (
              <Button
                key={index}
                variant="outline"
                className="w-full h-auto p-4 group md:bg-muted bg-black/40 "
                asChild
              >
                <Link href={item.link} target={item.link.startsWith("/") ? undefined : "_blank"} rel={item.link.startsWith("/") ? undefined : "noopener noreferrer"} className="w-full">
                  <div className="flex items-center justify-between w-full">
                    <div className="flex items-center gap-3">
                      <div className="shrink-0 w-8 h-8 flex items-center justify-center">
                        <IconComponent className="w-6 h-6 text-zinc-300" />
                      </div>
                      <div className="flex flex-col items-start text-left">
                        <span className="font-medium text-zinc-100">{item.name}</span>
                        {item.desc && <span className="text-xs text-zinc-400">{item.desc}</span>}
                      </div>
                    </div>
                    {count !== null && (
                      <span className="text-xs font-medium shrink-0">
                        {formatCount(count.count)} 
                        <span className="text-zinc-400"> {count.label}</span>
                      </span>
                    )}
                  </div>
                </Link>
              </Button>
            );
          })}
        </nav>
      </div>
      <div className="flex justify-between items-center pt-4 border-t border-zinc-800/50">
        <Button 
          variant="ghost" 
          onClick={() => setIsPage2(false)}
          disabled={!isPage2}
          className="text-zinc-400 hover:text-white disabled:opacity-50"
        >
          <ArrowLeft />
        </Button>
        <Button 
          variant="ghost" 
          onClick={() => setIsPage2(true)}
          disabled={isPage2}
          className="text-zinc-400 hover:text-white disabled:opacity-50"
        >
          <ArrowRight />
        </Button>
      </div>
    </CardContent>
  );
}