Empty

'use client';
import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  Icon,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  Button,
  type EmptySize,
} from '@mbsw/ui';
import { FolderOpen } from 'lucide-react';

export default function Demo() {
  const settings = {
    "showIcon": true,
    "showTitle": true,
    "showDescription": true,
    "showAction": true,
    "title": "Add a project.",
    "description": "View and organize your work in one place.",
    "actionLabel": "Add project",
    "size": "md"
  };
  const mediaSize = { sm: 'xl', md: '2xl', lg: '4xl' } as const;
  return (
    <Empty size={settings.size as EmptySize}>
      <EmptyHeader>
        {settings.showIcon && (
          <EmptyMedia style={{ color: 'var(--riido-foreground-empty)' }}>
            <Icon
              icon={FolderOpen}
              size={mediaSize[settings.size as EmptySize]}
              decorative
            />
          </EmptyMedia>
        )}
        {settings.showTitle && <EmptyTitle>{settings.title}</EmptyTitle>}
        {settings.showDescription && (
          <EmptyDescription style={{ whiteSpace: 'pre-wrap' }}>
            {settings.description}
          </EmptyDescription>
        )}
      </EmptyHeader>
      {settings.showAction && (
        <EmptyContent>
          <Button size={settings.size as EmptySize} tone="secondary">
            {settings.actionLabel}
          </Button>
        </EmptyContent>
      )}
    </Empty>
  );
}