'use client';

import { Phone } from 'lucide-react';
import { cn, formatPhone } from '@/lib/utils';

interface PhoneNumberCardProps {
  phoneNumber: string;
  sid: string;
  friendlyName: string;
  isConnected: boolean;
  isSelected: boolean;
  onClick: () => void;
}

export default function PhoneNumberCard({
  phoneNumber,
  friendlyName,
  isConnected,
  isSelected,
  onClick,
}: PhoneNumberCardProps) {
  return (
    <button
      onClick={onClick}
      className={cn(
        'group relative w-full text-left rounded-xl border p-3.5 transition-all duration-300 outline-none',
        'bg-slate-800/40 backdrop-blur-sm',
        isSelected
          ? 'border-cyan-400/60 shadow-[0_0_20px_rgba(34,211,238,0.15)] bg-cyan-500/[0.08]'
          : isConnected
            ? 'border-cyan-500/25 shadow-[0_0_12px_rgba(34,211,238,0.06)]'
            : 'border-slate-700/50 hover:border-slate-600/60',
        'hover:bg-slate-800/60'
      )}
    >
      {/* Connected glow indicator */}
      {isConnected && (
        <div className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-cyan-400 shadow-[0_0_8px_rgba(34,211,238,0.6)]">
          <div className="absolute inset-0 rounded-full bg-cyan-400 animate-ping opacity-30" />
        </div>
      )}

      <div className="flex items-center gap-3">
        <div
          className={cn(
            'flex h-9 w-9 items-center justify-center rounded-lg transition-colors',
            isConnected || isSelected
              ? 'bg-cyan-500/15 border border-cyan-500/25'
              : 'bg-slate-700/50 border border-slate-600/30'
          )}
        >
          <Phone
            className={cn(
              'h-4 w-4 transition-colors',
              isConnected || isSelected ? 'text-cyan-400' : 'text-slate-500'
            )}
          />
        </div>

        <div className="flex-1 min-w-0">
          <p
            className={cn(
              'text-sm font-semibold num truncate transition-colors',
              isConnected || isSelected ? 'text-white' : 'text-slate-300'
            )}
          >
            {formatPhone(phoneNumber)}
          </p>
          {friendlyName && friendlyName !== phoneNumber && (
            <p className="text-[11px] text-slate-500 truncate mt-0.5">
              {friendlyName}
            </p>
          )}
        </div>
      </div>

      {/* Selection ring animation */}
      {isSelected && (
        <div className="absolute inset-0 rounded-xl border-2 border-cyan-400/40 animate-pulse pointer-events-none" />
      )}
    </button>
  );
}
