frontend/src/components/profile/ContactInfo.tsx

'use client';

import { useState } from 'react';
import Image from 'next/image';

interface ContactInfoProps {
  email: string;
  phone: string;
}

// Helper function to mask email
function maskEmail(email: string): string {
  const [localPart, domain] = email.split('@');
  if (!domain) return '********';
  const maskedLocal = localPart.slice(0, 2) + '********';
  return `${maskedLocal}@${domain}`;
}

// Helper function to mask phone
function maskPhone(phone: string): string {
  if (phone.length <= 4) return '********';
  return phone.slice(0, -4).replace(/./g, '*') + phone.slice(-4);
}

export function ContactInfo({ email, phone }: ContactInfoProps) {
  const [showEmail, setShowEmail] = useState(false);
  const [showPhone, setShowPhone] = useState(false);

  return (
    <div className="w-full max-w-[354px] lg:max-w-none border border-[#00293d]/10 rounded-[15px] p-4">
      <div className="flex items-center gap-2 mb-2">
        <span className="font-bold text-[#00293d] text-sm flex-shrink-0">Email:</span>
        <span className="text-[#00293d] text-sm font-serif truncate min-w-0 flex-1">
          {showEmail ? email : maskEmail(email)}
        </span>
        <button
          className="p-1 hover:bg-gray-100 rounded flex-shrink-0"
          onClick={() => setShowEmail(!showEmail)}
        >
          <Image
            src={showEmail ? "/assets/icons/eye-off-icon.svg" : "/assets/icons/eye-icon.svg"}
            alt={showEmail ? "Hide email" : "Show email"}
            width={16}
            height={16}
          />
        </button>
      </div>
      <div className="flex items-center gap-2">
        <span className="font-bold text-[#00293d] text-sm flex-shrink-0">Ph.No:</span>
        <span className="text-[#00293d] text-sm font-serif truncate min-w-0 flex-1">
          {showPhone ? phone : maskPhone(phone)}
        </span>
        <button
          className="p-1 hover:bg-gray-100 rounded flex-shrink-0"
          onClick={() => setShowPhone(!showPhone)}
        >
          <Image
            src={showPhone ? "/assets/icons/eye-off-icon.svg" : "/assets/icons/eye-icon.svg"}
            alt={showPhone ? "Hide phone" : "Show phone"}
            width={16}
            height={16}
          />
        </button>
      </div>
    </div>
  );
}