'use client';

import Image from 'next/image';
import { ConnectionRequestCounts } from '@/services/connection-requests.service';

interface NetworkSidebarProps {
  counts?: ConnectionRequestCounts;
}

interface StatItem {
  label: string;
  icon: string;
  count: number;
  color?: string;
}

export function NetworkSidebar({ counts }: NetworkSidebarProps) {
  const statItems: StatItem[] = [
    {
      label: 'Pending Requests',
      icon: '/assets/icons/people-icon.svg',
      count: counts?.pending || 0,
      color: '#E58625',
    },
    {
      label: 'Connections',
      icon: '/assets/icons/people-icon.svg',
      count: counts?.accepted || 0,
      color: '#5ba4a4',
    },
  ];

  return (
    <div className="border border-[#00293d] rounded-[7px] p-4 w-full lg:w-[280px] bg-white h-fit">
      <h2 className="font-fractul font-medium text-[20px] leading-[24px] text-[#00293D] mb-4">
        Manage my network
      </h2>

      <div className="w-full h-0 border-t border-[#00293d]/30 mb-4" />

      <div className="space-y-3">
        {statItems.map((item) => (
          <div
            key={item.label}
            className="flex items-center gap-3 py-2 px-1"
          >
            <Image
              src={item.icon}
              alt={item.label}
              width={31}
              height={31}
            />
            <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] flex-1">
              {item.label}
            </span>
            <span
              className="text-white text-[12px] font-bold rounded-full px-2 py-0.5 min-w-[20px] text-center"
              style={{ backgroundColor: item.color }}
            >
              {item.count}
            </span>
          </div>
        ))}
      </div>

      {/* Total Connections Summary */}
      <div className="mt-4 pt-4 border-t border-[#00293d]/30">
        <div className="flex items-center justify-between">
          <span className="font-serif font-normal text-[13px] text-[#00293D]/70">
            Total in network
          </span>
          <span className="font-serif font-bold text-[14px] text-[#00293D]">
            {counts?.accepted || 0}
          </span>
        </div>
      </div>
    </div>
  );
}
