import { Phone } from "lucide-react";
import { t, type Locale } from "@/lib/content";
import { contactChannels } from "@/lib/contact";
/**
* Chữ hiệu Zalo chính thức.
*
* Dữ liệu đường dẫn lấy từ bộ Simple Icons (tệp icon phát hành theo CC0);
* nhãn hiệu Zalo thuộc về VNG và ở đây chỉ dùng để chỉ đúng kênh liên hệ, theo
* đúng mục đích của nó. Xem `docs/DEPENDENCIES.md`.
*
* Vẽ nội tuyến chứ không tải từ máy chủ Zalo: `img-src` trong CSP chỉ cho phép
* ảnh cùng nguồn, nên ảnh ngoài sẽ bị chặn mà không báo lỗi.
*
* Chữ hiệu tự nó đọc thành "Zalo" nên không kèm thêm nhãn chữ bên cạnh; tên gọi
* cho trình đọc màn hình đặt bằng `aria-label` trên chính thẻ liên kết.
*/
export function ZaloMark({ height = 14 }: { height?: number }) {
return (
);
}
type Props = {
locale: Locale;
phone?: string | null;
/** "bar" cho thanh tiện ích, "stack" cho footer và menu, "dock" cho nút nổi. */
variant?: "bar" | "stack" | "dock";
};
/**
* Hai kênh liên hệ tức thời. Ẩn hoàn toàn khi Cài đặt chưa có số điện thoại,
* để website không mời gọi một hành động không thực hiện được.
*/
export function ContactChannels({ locale, phone, variant = "stack" }: Props) {
const channels = contactChannels(phone);
if (!channels) return null;
// Ghép nhãn từ chuỗi tĩnh rồi mới nối số: chuỗi dựng động không lọt vào
// scripts/check-translations.ts, nên bản tiếng Trung sẽ âm thầm rơi về tiếng
// Anh mà không có gì báo.
const callTitle = t(locale, "Gọi", "Call") + " " + channels.display;
const zaloTitle =
t(locale, "Nhắn tin Zalo tới", "Chat on Zalo with") +
" " +
channels.display;
const newTab = t(locale, "mở trong tab mới", "opens in a new tab");
if (variant === "dock")
return (
/**
* Neo ở cạnh trái. Hầu hết bộ chatbot nhúng (Zalo OA, Crisp, Tawk…) tự đặt
* mình ở góc phải dưới và không phải bộ nào cũng cho đổi, nên góc phải
* được giữ trống sẵn cho phần tích hợp sau này.
*/
{/* Nhãn đặt bằng aria-label vì chữ hiển thị bị ẩn trên màn hình hẹp. */}