<?php

namespace Components\Ui;

/**
 * FilterPillsSkeleton component for skeleton loading states of FilterPills
 */
class FilterPillsSkeleton
{
    /**
     * Render multiple skeleton pills
     *
     * @param int $count Number of skeleton pills to render
     * @return string
     */
    public static function render(int $count = 5): string
    {
        $html = '';
        for ($i = 0; $i < $count; $i++) {
            $html .= self::renderSingle($i);
        }
        return $html;
    }

    /**
     * Render a single skeleton pill
     *
     * @param int $index Index to vary width slightly
     * @return string
     */
    public static function renderSingle(int $index = 0): string
    {
        $widths = ['w-12', 'w-20', 'w-18', 'w-24', 'w-14'];
        $width = $widths[$index % count($widths)];

        // Match Button::render md size rounded-full height which is h-9 (36px)
        return '<div class="animate-pulse bg-gray-200 dark:bg-zinc-700/50 h-9 ' . $width . ' rounded-full"></div>';
    }
}
