import { useFormContext } from "react-hook-form"

import { AncillaryCard } from "@/components/TempDesignSystem/AncillaryCard"

import styles from "./ancillaryChoiceCard.module.css"

import type { BreakfastChoiceCardProps } from "@/types/components/ancillaryCard"

export default function BreakfastChoiceCard({
  name,
  id,
  value,
  ancillary,
}: BreakfastChoiceCardProps) {
  const { register, setValue } = useFormContext()

  function onLabelClick(event: React.MouseEvent) {
    // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
    event.preventDefault()
    setValue(name, value)
  }
  return (
    <label
      onClick={onLabelClick}
      tabIndex={0}
      className={styles.ancillaryChoiceCard}
    >
      <AncillaryCard ancillary={ancillary} />
      <input
        {...register(name)}
        aria-hidden
        id={id || name}
        hidden
        type="radio"
        value={value}
      />
    </label>
  )
}