import { cn, interactive } from '@/lib'

const PILL =
  'flex items-center justify-center w-full max-w-[130px] h-[50px] rounded-full py-4 px-6 ' +
  'text-lg font-semibold whitespace-nowrap ' +
  interactive

export interface ActionSectionProps {
  isParticipating: boolean
  isRejecting: boolean
  onParticipate: () => void
  onReject: () => void
}

export function ActionSection({
  isParticipating,
  isRejecting,
  onParticipate,
  onReject,
}: ActionSectionProps) {
  return (
    <div className="flex w-full py-[35px] items-center justify-end gap-3">
      <button
        type="button"
        onClick={onParticipate}
        disabled={isParticipating}
        className={cn(
          PILL,
          'bg-primary text-primary-foreground',
          isParticipating && 'opacity-50 cursor-not-allowed',
        )}
      >
        협상 참여
      </button>
      <button
        type="button"
        onClick={onReject}
        disabled={isRejecting}
        className={cn(
          PILL,
          'bg-background text-primary border border-primary',
          isRejecting && 'opacity-50 cursor-not-allowed',
        )}
      >
        거부
      </button>
    </div>
  )
}