import { Headphones, MessageCircle } from "lucide-react";
import { makeWhatsAppUrl } from "@/lib/formatters/phone";
import styles from "./LeaderReportComponents.module.css";

interface Props {
  reportCode: string;
}

export default function LeaderReportSupportCard({ reportCode }: Props) {
  const whatsappUrl = makeWhatsAppUrl(
    "081234567890",
    `Halo Tim Operasional PPT Adventure, saya butuh bantuan pengisian Laporan Leader untuk kode: ${reportCode}`
  );

  return (
    <div className={styles.supportCard}>
      <div className={styles.supportHeader}>
        <Headphones size={18} className={styles.supportIcon} aria-hidden />
        <span>Butuh Bantuan?</span>
      </div>
      <p className={styles.supportDesc}>
        Jika ada kendala dalam pengisian laporan, tim kami siap membantu.
      </p>
      <a
        href={whatsappUrl}
        target="_blank"
        rel="noopener noreferrer"
        className={styles.whatsappBtn}
      >
        <MessageCircle size={16} aria-hidden />
        <span>Hubungi via WhatsApp →</span>
      </a>
    </div>
  );
}