"use client";

import { Linkedin, Twitter, Facebook, Instagram } from "lucide-react";
import type { Network } from "@/lib/types";

const NETWORKS: { value: Network; label: string; icon: typeof Linkedin; color: string }[] = [
  { value: "LINKEDIN", label: "LinkedIn", icon: Linkedin, color: "text-[#0A66C2]" },
  { value: "TWITTER", label: "Twitter", icon: Twitter, color: "text-[#1DA1F2]" },
  { value: "FACEBOOK", label: "Facebook", icon: Facebook, color: "text-[#1877F2]" },
  { value: "INSTAGRAM", label: "Instagram", icon: Instagram, color: "text-[#E4405F]" },
];

interface NetworkSelectorProps {
  selected: Network[];
  onChange: (networks: Network[]) => void;
}

export function NetworkSelector({ selected, onChange }: NetworkSelectorProps) {
  const toggle = (network: Network) => {
    if (selected.includes(network)) {
      onChange(selected.filter((n) => n !== network));
    } else {
      onChange([...selected, network]);
    }
  };

  return (
    <div className="flex flex-wrap gap-2">
      {NETWORKS.map(({ value, label, icon: Icon, color }) => {
        const isSelected = selected.includes(value);
        return (
          <button
            key={value}
            type="button"
            onClick={() => toggle(value)}
            className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors ${
              isSelected
                ? "border-primary bg-primary/5 font-medium"
                : "border-border hover:border-primary/50"
            }`}
          >
            <Icon className={`h-4 w-4 ${isSelected ? color : "text-muted-foreground"}`} />
            {label}
          </button>
        );
      })}
    </div>
  );
}