"use client";

import { useState } from "react";
import WhatsAppPrompt from "@/components/WhatsAppPrompt";
import type { Lang } from "@/lib/config";

type ChannelCardProps = {
  icon: string;
  title: string;
  description: string;
  meta: string;
  href: string;
  helper?: string;
  isWhatsApp?: boolean;
  lang: Lang;
  startNowText: string;
};

export default function ChannelCard({
  icon,
  title,
  description,
  meta,
  href,
  helper,
  isWhatsApp,
  lang,
  startNowText,
}: ChannelCardProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleClick = (e: React.MouseEvent) => {
    if (isWhatsApp) {
      e.preventDefault();
      setIsModalOpen(true);
    }
  };

  return (
    <>
      <a
        href={href}
        onClick={handleClick}
        className="group flex flex-col justify-between rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm transition hover:border-brand-green/40 hover:shadow cursor-pointer"
        target={!isWhatsApp && href.startsWith("http") ? "_blank" : undefined}
        rel={
          !isWhatsApp && href.startsWith("http")
            ? "noopener noreferrer"
            : undefined
        }
      >
        <div className="flex items-start gap-3">
          <span className="text-2xl" aria-hidden="true">
            {icon}
          </span>
          <div className="space-y-2">
            <div className="flex items-center justify-between gap-2">
              <h3 className="text-lg font-semibold text-neutral-900">
                {title}
              </h3>
              <span className="text-xs font-semibold uppercase tracking-wide text-brand-green/70">
                {meta}
              </span>
            </div>
            <p className="text-sm text-neutral-600">{description}</p>
            {helper && <p className="text-xs text-neutral-500">{helper}</p>}
          </div>
        </div>
        <span className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-brand-green">
          {startNowText}
          <span aria-hidden="true">→</span>
        </span>
      </a>
      {isWhatsApp && (
        <WhatsAppPrompt
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          lang={lang}
        />
      )}
    </>
  );
}