'use client';

import { NetworkSidebar } from './component/NetworkSidebar';
import { InvitationCard } from './component/InvitationCard';

// Mock data for invitations
const invitations = [
  {
    id: '1',
    name: 'Sathish R',
    avatar: '/assets/icons/user-placeholder-icon.svg',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    mutualConnection: 'Anvar',
  },
  {
    id: '2',
    name: 'Ragunath',
    avatar: '/assets/icons/user-placeholder-icon.svg',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    mutualConnection: 'Anvar',
  },
  {
    id: '3',
    name: 'Sabari',
    avatar: '/assets/icons/user-placeholder-icon.svg',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    mutualConnection: 'Anvar',
  },
];

export default function NetworkPage() {
  const handleAccept = (id: string) => {
    console.log('Accepted invitation:', id);
  };

  const handleIgnore = (id: string) => {
    console.log('Ignored invitation:', id);
  };

  return (
    <div className="flex flex-col lg:flex-row gap-6">
      {/* Left Sidebar */}
      <NetworkSidebar />

      {/* Main Content */}
      <div className="flex-1">
        {/* Header Card */}
        <div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
          <h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
            Manage my network
          </h1>
        </div>

        {/* Invitations Card */}
        <div className="border border-[#00293d]/10 rounded-[15px] bg-white">
          {/* Invitations Header */}
          <div className="flex items-center justify-between px-6 py-4 border-b border-[#00293d]/10">
            <h2 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
              Invitations ({invitations.length})
            </h2>
            <button className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] hover:text-[#e58625] transition-colors cursor-pointer">
              Show All
            </button>
          </div>

          {/* Invitations List */}
          <div className="px-6 divide-y divide-[#00293d]/10">
            {invitations.map((invitation) => (
              <InvitationCard
                key={invitation.id}
                {...invitation}
                onAccept={handleAccept}
                onIgnore={handleIgnore}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
