import React from 'react';

interface ContactInfoLineProps {
  icon: React.ReactNode;
  href?: string;
  children?: React.ReactNode;
}

const ContactInfoLine = ({ icon, href, children }: ContactInfoLineProps) => {
  const content = href ? (
    <a
      href={href}
      className="hover:underline truncate"
      target={href.startsWith('http') ? '_blank' : undefined}
      rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
    >
      {children}
    </a>
  ) : (
    <span className="truncate">{children}</span>
  );

  return (
    <div className="flex items-center gap-3 p-2 rounded-md transition-colors hover:bg-muted/50">
      <div className="shrink-0">{icon}</div>
      <div className="min-w-0">{content}</div>
    </div>
  );
};

export default React.memo(ContactInfoLine);