import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Badge, Card } from "../index";
const BadgeDocs = () => {
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Badge - Variantes y Estados", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", children: [_jsx(Badge, { variant: "primary", children: "Primario" }), _jsx(Badge, { variant: "secondary", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation-triangle", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times-circle", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info-circle", children: "Informaci\u00F3n" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Badge, { size: "sm", icon: "fa-circle", iconLabel: "Indicador peque\u00F1o", children: "Peque\u00F1o" }), _jsx(Badge, { size: "md", icon: "fa-circle", children: "Mediano" }), _jsx(Badge, { size: "lg", icon: "fa-circle", children: "Grande" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y dise\u00F1o" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { icon: "fa-bell", rounded: true, children: "Notificaci\u00F3n" }), _jsx(Badge, { icon: "fa-arrow-right", iconPosition: "right", children: "Acci\u00F3n" }), _jsx(Badge, { icon: "fa-shield-alt", iconLabel: "Estado protegido", children: "Accesible" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "icon" }), " con clases FontAwesome 5 (ej.", " ", _jsx("code", { children: "fa-check" }), ") y combina ", _jsx("code", { children: "rounded" }), " para badges tipo pills."] })] })] }) }) }));
};
export default BadgeDocs;
