"use client";

import { useState } from "react";
import PhoneChoiceModal from "@/components/ui/PhoneChoiceModal";
import type { Dictionary } from "@/lib/dictionaries";

interface FooterPhoneLinkProps {
  number: string;
  dict: Dictionary;
}

// Keeps the footer itself a server component — only the phone entry needs state.
export default function FooterPhoneLink({ number, dict }: FooterPhoneLinkProps) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="text-left text-sm text-text-secondary transition-colors hover:text-text-primary"
      >
        {number}
      </button>

      <PhoneChoiceModal
        open={open}
        number={number}
        dict={dict}
        onClose={() => setOpen(false)}
      />
    </>
  );
}