"use client";

import { Mail, MessageCircle, Phone } from "lucide-react";
import type { ContactBlock } from "@/lib/chat/types";
import { useChatBlocks } from "../ChatBlockContext";
import { BlockCard } from "./shared";

const digits = (value: string) => value.replace(/[^\d+]/g, "");

export default function ContactCard({ block }: { block: ContactBlock }) {
  const { copy } = useChatBlocks();
  const phone = block.phone ? digits(block.phone) : "";
  const whatsapp = block.whatsapp ? block.whatsapp.replace(/\D/g, "") : "";
  const email = block.email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(block.email) ? block.email : "";
  if (!phone && !whatsapp && !email) return null;

  const linkClass =
    "flex items-center gap-2 rounded-lg px-2 py-1.5 font-medium text-gray-800 ring-1 ring-gray-100 transition-colors hover:bg-red-50 hover:text-[#A50E0E]";

  return (
    <BlockCard>
      <p className="mb-2 text-xs font-semibold text-gray-900">{copy.contactTitle}</p>
      <div className="space-y-1.5">
        {phone ? (
          <a href={`tel:${phone}`} className={linkClass}>
            <Phone size={14} className="text-[#CC1414]" aria-hidden />
            <span className="text-gray-500">{copy.call}</span>
            <span className="ml-auto">{block.phone}</span>
          </a>
        ) : null}
        {whatsapp ? (
          <a href={`https://wa.me/${whatsapp}`} target="_blank" rel="noopener noreferrer" className={linkClass}>
            <MessageCircle size={14} className="text-emerald-600" aria-hidden />
            <span className="text-gray-500">{copy.whatsapp}</span>
            <span className="ml-auto">{block.whatsapp}</span>
          </a>
        ) : null}
        {email ? (
          <a href={`mailto:${email}`} className={linkClass}>
            <Mail size={14} className="text-[#CC1414]" aria-hidden />
            <span className="text-gray-500">{copy.emailUs}</span>
            <span className="ml-auto truncate">{email}</span>
          </a>
        ) : null}
      </div>
    </BlockCard>
  );
}