import Link from 'next/link';
import { ArrowRight, Check } from 'lucide-react';
import { getContent } from '@/content';
import { formatPrice, paymentsMode, products } from '@/lib/config';
import { UnlockButton } from './ClientButtons';

/**
 * The Ark Summit VIP Ticket, drawn as a ticket: what's included on top, the price and button on the
 * tear-off stub below. Pass `skipHref` to add a link through to the free result.
 */
export function VipTicket({ code, leadName, skipHref }: { code: string; leadName?: string; skipHref?: string }) {
  const { vip, vipIncludes } = getContent();
  const price = formatPrice(products.vipTicket.price);
  return (
    <div className="vip-ticket">
      <div className="vip-ticket-main">
        <p className="vip-ticket-kicker">Admit one · {vip.circleName}</p>
        <h3 className="vip-ticket-title">
          Ark Summit <em>VIP Ticket</em>
        </h3>
        <ul className="vip-includes">
          {vipIncludes(leadName).map((item) => (
            <li key={item.title}>
              <span className="vip-includes-icon" aria-hidden="true">
                <Check />
              </span>
              <div>
                <strong>{item.title}</strong>
                <span>{item.text}</span>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <div className="vip-ticket-stub">
        <p className="vip-price">
          {price}
          <small>one-time</small>
        </p>
        <UnlockButton
          code={code}
          mode={paymentsMode()}
          label="Get my VIP Ticket"
          className="start-btn vip-cta"
          icon={
            <span className="start-btn-icon" aria-hidden="true">
              <ArrowRight />
            </span>
          }
        />
        {skipHref && (
          <Link href={skipHref} className="vip-skip">
            {vip.skip} →
          </Link>
        )}
      </div>
    </div>
  );
}