import { User } from 'lucide-react';

interface CustomerInfoProps {
  userId: number;
  userName?: string;
  userEmail?: string;
}

export function CustomerInfo({ userId, userName, userEmail }: CustomerInfoProps) {
  return (
    <div className="bg-gray-50 p-4 rounded-lg shadow-sm">
      <div className="flex items-center mb-3">
        <User className="h-5 w-5 text-indigo-500 mr-2" />
        <h3 className="text-sm font-medium text-gray-900">Информация о клиенте</h3>
      </div>
      <div className="text-sm text-gray-600 space-y-2">
        <p className="font-medium">{userName || `Пользователь #${userId}`}</p>
        {userEmail && (
          <p className="flex items-center">
            <span className="text-gray-500 mr-2">Email:</span> 
            <a href={`mailto:${userEmail}`} className="text-indigo-600 hover:underline">{userEmail}</a>
          </p>
        )}
        <p className="flex items-center">
          <span className="text-gray-500 mr-2">ID:</span> {userId}
        </p>
      </div>
    </div>
  );
} 