import { TenantActive } from './TenantActive';

export default {
  title: 'Layout/TenantActive',
  component: TenantActive,
  tags: ['autodocs'],
  argTypes: {
    idTenantLabel: {
      control: 'text',
      description: 'Label de la sección izquierda (ID Tenant)',
    },
    idTenantValue: {
      control: 'text',
      description: 'Valor del ID Tenant (texto dentro del badge)',
    },
    estadoTenantLabel: {
      control: 'text',
      description: 'Label de la sección derecha (Estado Tenant)',
    },
    estadoTenantValue: {
      control: 'text',
      description: 'Valor del estado (texto dentro del badge)',
    },
    idTenantBadgeBorderColor: {
      control: 'color',
      description: 'Color del borde del badge de ID Tenant',
    },
    estadoTenantBadgeBorderColor: {
      control: 'color',
      description: 'Color del borde del badge de estado',
    },
    loading: {
      control: 'boolean',
      description: 'Muestra skeleton de carga en lugar del contenido',
    },
  },
};

export const Default = {
  args: {
    idTenantLabel: 'ID TENANT',
    idTenantValue: 'ncl_corp_002394_prod',
    estadoTenantLabel: 'ESTADO TENANT',
    estadoTenantValue: 'Activo / Operacional',
  },
};

export const SoloIdTenant = {
  args: {
    idTenantLabel: 'ID TENANT',
    idTenantValue: 'ncl_corp_002394_prod',
    estadoTenantLabel: '',
    estadoTenantValue: '',
  },
};

export const SoloEstadoTenant = {
  args: {
    idTenantLabel: '',
    idTenantValue: '',
    estadoTenantLabel: 'ESTADO TENANT',
    estadoTenantValue: 'Activo / Operacional',
  },
};

export const Personalizado = {
  args: {
    idTenantLabel: 'ID TENANT',
    idTenantValue: 'mi_tenant_123',
    estadoTenantLabel: 'ESTADO TENANT',
    estadoTenantValue: 'Inactivo',
    idTenantBadgeBorderColor: '#334681',
    estadoTenantBadgeBorderColor: '#DC2626',
  },
};

export const Loading = {
  args: {
    loading: true,
    // Con loading=true solo se muestran skeletons (texto + badge en cada lado). Estos valores no se pintan.
    idTenantLabel: 'ID TENANT',
    idTenantValue: 'ncl_corp_002394_prod',
    estadoTenantLabel: 'ESTADO TENANT',
    estadoTenantValue: 'Activo / Operacional',
  },
  parameters: {
    docs: {
      description: {
        story: 'Estado de carga: se muestran 4 skeletons (label + badge a la izquierda, label + badge a la derecha).',
      },
    },
  },
};
