import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { Button } from "../form-controls";
export const DataField = ({ label, value, inline = false, align = "left", title, link, className = "", labelClassName = "", }) => {
    const handleLinkClick = () => {
        if (link) {
            window.open(link, "_blank", "noopener,noreferrer");
        }
    };
    const alignClasses = {
        left: "text-left",
        right: "text-right",
        center: "text-center",
    };
    const justifyClasses = {
        left: "justify-start",
        right: "justify-end",
        center: "justify-center",
    };
    const baseContainerClasses = `
    font-[var(--font-default)]
    ${alignClasses[align]}
    ${className}
  `.trim();
    const baseLabelClasses = `
    text-sm text-[var(--color-text-primary)]
    ${labelClassName}
  `.trim();
    const baseValueClasses = `
    text-base text-[var(--color-text-primary)]
  `;
    if (inline) {
        // Modo inline: label y value en la misma línea
        return (_jsx("div", { className: baseContainerClasses, title: title, children: _jsxs("div", { className: `flex items-center gap-2 ${justifyClasses[align]}`, children: [label && _jsxs("span", { className: baseLabelClasses, children: [label, ":"] }), _jsx("span", { className: baseValueClasses, children: value }), link && (_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-arrow-right", onClick: handleLinkClick, "aria-label": "Abrir enlace" }))] }) }));
    }
    // Modo vertical: label arriba, value abajo
    return (_jsxs("div", { className: baseContainerClasses, title: title, children: [label && _jsx("div", { className: baseLabelClasses, children: label }), _jsxs("div", { className: `flex items-center gap-2 ${justifyClasses[align]}`, children: [_jsx("div", { className: baseValueClasses, children: value }), link && (_jsx(Button, { size: "sm", variant: "ghost", icon: "fa-arrow-right", onClick: handleLinkClick, "aria-label": "Abrir enlace" }))] })] }));
};
