@props([
    "background_color" => "#FFFFFF",
    "direction",
])

<button
    type="button"
    @class([
        "relative flex flex-1 cursor-pointer items-center justify-center gap-1 border-y-2 border-brand-orange py-3 align-middle leading-normal font-semibold",
        "hover:border-transparent hover:bg-brand-orange-hover active:border-transparent active:bg-brand-orange-active",

        // Text color logic
        "text-brand-orange hover:text-white active:text-white" => $background_color === "#FFFFFF",
        "text-white" => $background_color === "#004F59",
        "text-black hover:text-white active:text-white" => ! in_array($background_color, ["#FFFFFF", "#004F59"]),

        // Direction based rounding
        "rounded-s-lg border-l-2" => $direction === "left",
        "rounded-e-lg border-r-2" => $direction === "right",
    ])
    {{ $attributes }}
>
    {{ $slot }}
</button>