<?php
namespace App\Components;

use Core\Component;

class StatsCard extends Component
{
    public string $textHeading = "";

    public string $icon = "";

    public string $iconColor = "";

    public int $statsValue = 0;

    public string $color = "bg-primary";

    public bool $isProgressBas = true;

    

    public function heading(string $textHeading): self{
        $this->textHeading = $textHeading;
        return $this;
    }
    
    public static function make(): static
    {
        return new static();
    }

    public function value(int $value): self{
        $this->statsValue = $value;
        return $this;
    } 

    public function icon(string $icon, $iconColor = 'text-primary'): self{
        $this->icon = $icon;
        $this->iconColor = $iconColor;
        return $this;
    }

    public function color(string $color): self{
        trim($color);
        $this->color = $color;
        return $this;
    }


    public function isProgressBas(): bool{
        $this->isProgressBas = true;
        return $this->isProgressBas;
    }

    

    public function render(): string
    {
        // return "<button{$this->attrs()}>{$this->text}</button>";
        $isProgressBar = $this->isProgressBas;

        $progressHtml = '';

        // Comparison check — only show progress if true
        if ($isProgressBar && $this->statsValue > 0) {
            $progressHtml = <<<HTML
                <div class="mt-3">
                    <div class="progress progress-sm" style="height: 5px;">
                        <div class="progress-bar {$this->color}" 
                            role="progressbar" 
                            style="width: {$this->statsValue}%;" 
                            aria-valuenow="{$this->statsValue}" 
                            aria-valuemin="0" 
                            aria-valuemax="100">
                        </div>
                    </div>
                </div>
            HTML;
        }

        return <<<HTML
        <div class="card stats-card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h4 class="fw-normal">{$this->textHeading}</h4>
                        <p class="text-muted mb-0">{$this->text}</p>
                    </div>
                    <div class="avatar-sm flex-shrink-0">
                        <span class="avatar-title {$this->color}-subtle rounded-circle fs-3">
                            <i class="{$this->icon} {$this->iconColor}"></i>
                        </span>
                    </div>
                </div>
                
                {$progressHtml}
            </div>
        </div>
        HTML;
    }
    
}