// app/components/PhoneLinks.tsx

"use client";

import React from 'react';

interface SafePhoneLinkProps {
    parts: string[];
    display: string;
    className?: string;
}

export const SafePhoneLink: React.FC<SafePhoneLinkProps> = ({
    parts,
    display,
    className = "text-sm text-slate-teal font-mono font-bold bg-seafoam/20 hover:bg-seafoam/40 px-3 py-1.5 rounded-lg transition-colors cursor-pointer"
}) => {
    const fullNumber = parts.join('');

    const handleClick = (e: React.MouseEvent<HTMLAnchorElement> | React.TouchEvent<HTMLAnchorElement>) => {
        e.currentTarget.href = `tel:${fullNumber}`;
    };

    return (
        <a
            href="#"
            onMouseDown={handleClick}
            onTouchStart={handleClick}
            className={className}
        >
            {display}
        </a>
    );
};