"use client";

import Link from "next/link";
import { useEventModal } from "./event-modal-context";

interface Props {
  primaryText: string;
  secondaryText: string;
}

export function HeroButtons({ primaryText, secondaryText }: Props) {
  const { openModal } = useEventModal();

  return (
    <div className="flex flex-wrap gap-3 pt-2">
      <Link
        href="/boutique"
        className="rounded-full bg-[var(--accent-3)] px-5 py-2.5 text-sm font-semibold text-white shadow-[0_12px_24px_rgba(245,80,80,0.28)] hover:-translate-y-[1px] hover:bg-[var(--accent-2)]"
      >
        {primaryText}
      </Link>
      <button
        onClick={openModal}
        className="rounded-full border border-[var(--accent-3)] bg-white/90 px-5 py-2.5 text-sm font-semibold text-[var(--foreground)] hover:-translate-y-[1px] hover:bg-white"
      >
        {secondaryText}
      </button>
    </div>
  );
}