import { Card } from './Card';
import { CardSkeleton } from './CardSkeleton';
import { CardVacia } from './CardVacia';
import { CardError } from './CardError';

export default {
  title: 'DataDisplay/Card',
  tags: ['autodocs'],
};

export const CardInteligenteCargando = {
  render: () => (
    <div className="p-4">
      <Card loading={true} title="Notificaciones" />
    </div>
  ),
};

export const CardInteligenteConDatos = {
  render: () => (
    <div className="p-4">
      <Card
        loading={false}
        hasData={true}
        variant="corto"
        title="Notificaciones"
      >
        <p>Contenido de la card con datos</p>
      </Card>
    </div>
  ),
};

export const CardInteligenteSinDatos = {
  render: () => (
    <div className="p-4">
      <Card
        loading={false}
        hasData={false}
        title="Notificaciones"
      />
    </div>
  ),
};

export const CardInteligenteConError = {
  render: () => (
    <div className="p-4">
      <Card
        loading={false}
        error="Error al cargar los datos"
        title="Notificaciones"
      />
    </div>
  ),
};

export const CardInteligenteConEstado = {
  render: () => (
    <div className="p-4">
      <Card
        loading={false}
        hasData={true}
        variant="cortoMasEstado"
        title="Notificaciones"
        status="3 nuevas"
      >
        <p>Contenido de la card</p>
      </Card>
    </div>
  ),
};

export const TituloCorto = {
  render: () => (
    <div className="p-4">
      <Card hasData={true} variant="corto" title="Notificaciones">
        <p>Contenido ejemplo</p>
      </Card>
    </div>
  ),
};

export const TituloLargo = {
  render: () => (
    <div className="p-4">
      <Card
        hasData={true}
        variant="largo"
        title="Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos"
      >
        <p>Contenido ejemplo</p>
      </Card>
    </div>
  ),
};

export const TituloCortoMasEstado = {
  render: () => (
    <div className="p-4">
      <Card
        hasData={true}
        variant="cortoMasEstado"
        title="Notificaciones"
        status="3 nuevas"
      >
        <p>Contenido ejemplo</p>
      </Card>
    </div>
  ),
};

export const TituloLargoMasEstado = {
  render: () => (
    <div className="p-4">
      <Card
        hasData={true}
        variant="largoMasEstado"
        title="Notificaciones y Alertas del Sistema de Gestión de Recursos Humanos"
        status="3 nuevas"
      >
        <p>Contenido ejemplo</p>
      </Card>
    </div>
  ),
};

export const Skeleton = {
  render: () => (
    <div className="p-4">
      <CardSkeleton />
    </div>
  ),
};

export const Vacia = {
  render: () => (
    <div className="p-4">
      <CardVacia />
    </div>
  ),
};

export const Error = {
  render: () => (
    <div className="p-4">
      <CardError />
    </div>
  ),
};
