<?php

declare(strict_types=1);

namespace App\View\Components;

use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Button extends Component
{
    public const VARIANT_PRIMARY = 'primary';
    public const VARIANT_SECONDARY = 'secondary';
    public const VARIANT_OUTLINE = 'outline';

    public function __construct(public string $variant = self::VARIANT_PRIMARY, public bool $disabled = false)
    {
        //
    }

    public function classes(): string
    {
        $base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition ' .
            'duration-150 ease-in-out';

        $classes = match ($this->variant) {
            self::VARIANT_SECONDARY => [
                'base' => 'bg-secondary text-text',
                'hover' => 'hover:bg-secondary-dark',
                'disabled' => 'disabled:bg-secondary',
            ],
            self::VARIANT_OUTLINE => [
                'base' => 'bg-surface border border-primary text-primary',
                'hover' => 'hover:bg-primary hover:text-text-inverted',
                'disabled' => 'disabled:bg-surface disabled:text-primary',
            ],
            default => [
                'base' => 'bg-primary text-text-inverted',
                'hover' => 'hover:bg-primary-dark',
                'disabled' => 'disabled:bg-primary'
            ]
        };

        $baseDisabled = 'disabled:cursor-not-allowed disabled:opacity-60';

        return trim(
            $base . ' ' .
            $classes['base'] . ' ' .
            $classes['hover'] . ' ' .
            $baseDisabled . ' ' .
            $classes['disabled']
        );
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View
    {
        return view('components.button');
    }
}