import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { RoadMap, Card } from "../index";
const RoadMapDocs = () => {
    const basicStages = [
        { name: "Inicio", variant: "primary" },
        { name: "Progreso", variant: "success" },
        { name: "Finalización", variant: "info" },
    ];
    const stagesWithDescriptions = [
        {
            name: "Planificación",
            description: "Definir requisitos y alcance del proyecto",
            variant: "primary",
        },
        {
            name: "Desarrollo",
            description: "Construir las funcionalidades principales",
            variant: "success",
        },
        {
            name: "Pruebas",
            description: "Realizar testing completo del sistema",
            variant: "warning",
        },
        {
            name: "Lanzamiento",
            description: "Publicar y desplegar la aplicación",
            variant: "info",
        },
    ];
    const stagesWithIcons = [
        {
            name: "Análisis",
            description: "Analizar requerimientos",
            icon: "fa-search",
            variant: "primary",
        },
        {
            name: "Diseño",
            description: "Crear el diseño de la solución",
            icon: "fa-pencil-alt",
            variant: "secondary",
        },
        {
            name: "Implementación",
            description: "Desarrollar la solución",
            icon: "fa-code",
            variant: "success",
        },
        {
            name: "Despliegue",
            description: "Publicar en producción",
            icon: "fa-rocket",
            variant: "info",
        },
    ];
    const disabledStages = [
        {
            name: "Completado",
            description: "Esta etapa ya está finalizada",
            icon: "fa-check-circle",
            variant: "success",
        },
        {
            name: "En Progreso",
            description: "Trabajando actualmente en esta etapa",
            icon: "fa-spinner",
            variant: "primary",
        },
        {
            name: "Pendiente",
            description: "Esta etapa aún no ha comenzado",
            icon: "fa-clock",
            variant: "warning",
            disabled: true,
        },
        {
            name: "Bloqueado",
            description: "Esta etapa está bloqueada",
            icon: "fa-lock",
            variant: "danger",
            disabled: true,
        },
    ];
    const customColorStages = [
        {
            name: "Etapa 1",
            description: "Con color personalizado",
            icon: "fa-star",
            bg: "#8b5cf6",
        },
        {
            name: "Etapa 2",
            description: "Otro color personalizado",
            icon: "fa-heart",
            bg: "#ec4899",
        },
        {
            name: "Etapa 3",
            description: "Verde personalizado",
            icon: "fa-leaf",
            bg: "#10b981",
        },
    ];
    const allVariantsStages = [
        {
            name: "Primary",
            description: "Variante primaria",
            variant: "primary",
        },
        {
            name: "Secondary",
            description: "Variante secundaria",
            variant: "secondary",
        },
        {
            name: "Success",
            description: "Variante de éxito",
            variant: "success",
        },
        {
            name: "Warning",
            description: "Variante de advertencia",
            variant: "warning",
        },
        {
            name: "Danger",
            description: "Variante de peligro",
            variant: "danger",
        },
        {
            name: "Info",
            description: "Variante informativa",
            variant: "info",
        },
    ];
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "RoadMap - Etapas y Progreso", 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: "Uso B\u00E1sico" }), _jsx(RoadMap, { stages: basicStages }), _jsx("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente RoadMap muestra una serie de etapas conectadas con l\u00EDneas. Cada etapa tiene un c\u00EDrculo con el color seg\u00FAn su variante." })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con Descripciones" }), _jsx(RoadMap, { stages: stagesWithDescriptions }), _jsx("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes agregar descripciones a cada etapa que se mostrar\u00E1n debajo del nombre en un texto m\u00E1s peque\u00F1o." })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00CDconos" }), _jsx(RoadMap, { stages: stagesWithIcons }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cada etapa puede tener un \u00EDcono FontAwesome 5 que se mostrar\u00E1 dentro del c\u00EDrculo. Usa clases como ", _jsx("code", { children: "fa-check" }), ",", " ", _jsx("code", { children: "fa-code" }), ", etc."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Etapas Deshabilitadas" }), _jsx(RoadMap, { stages: disabledStages }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Las etapas con ", _jsx("code", { children: "disabled: true" }), " se muestran con una opacidad de 0.5, tanto el c\u00EDrculo como el texto (nombre y descripci\u00F3n)."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Colores Personalizados" }), _jsx(RoadMap, { stages: customColorStages }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes usar la propiedad ", _jsx("code", { children: "bg" }), " para definir un color de fondo personalizado (hexadecimal, rgb, o nombre de color). Esto tiene prioridad sobre la variante."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Todas las Variantes" }), _jsx(RoadMap, { stages: allVariantsStages }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Las variantes disponibles son: ", _jsx("code", { children: "primary" }), ",", " ", _jsx("code", { children: "secondary" }), ", ", _jsx("code", { children: "success" }), ", ", _jsx("code", { children: "warning" }), ", ", _jsx("code", { children: "danger" }), ", e ", _jsx("code", { children: "info" }), ". Las l\u00EDneas conectadoras tienen un gradiente que combina 50% del color de la etapa origen y 50% del color de la etapa destino."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo Completo" }), _jsx(RoadMap, { stages: [
                                    {
                                        name: "Inicio del Proyecto",
                                        description: "Kickoff y definición de objetivos",
                                        icon: "fa-flag",
                                        variant: "primary",
                                    },
                                    {
                                        name: "Desarrollo",
                                        description: "Implementación de funcionalidades",
                                        icon: "fa-code",
                                        variant: "success",
                                    },
                                    {
                                        name: "Revisión",
                                        description: "Code review y testing",
                                        icon: "fa-eye",
                                        variant: "warning",
                                    },
                                    {
                                        name: "Despliegue",
                                        description: "Publicación en producción",
                                        icon: "fa-rocket",
                                        variant: "info",
                                    },
                                    {
                                        name: "Post-Lanzamiento",
                                        description: "Monitoreo y mejoras continuas",
                                        icon: "fa-chart-line",
                                        variant: "secondary",
                                    },
                                ] }), _jsx("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo completo combinando todas las caracter\u00EDsticas: variantes, \u00EDconos y descripciones." })] })] }) }) }));
};
export default RoadMapDocs;
