import { Card, Empty, Flex, List, Tag, Typography } from 'antd';
import { registeredWidgets } from '../../../widgets/registry';
import { resolveWidgetFeatures } from '../../../widgets/core';

const { Paragraph, Text } = Typography;

export function WidgetRegistryLayout() {
  if (registeredWidgets.length === 0) {
    return <Empty description="등록된 위젯이 없습니다." />;
  }

  return (
    <Flex gap={20} wrap className="sample-widgets-layout">
      {registeredWidgets.map((widget) => (
        <div key={widget.id} className="sample-widgets-layout__item">
          <Card title={widget.title} extra={<Text code>{widget.id}</Text>}>
            <Paragraph>{widget.description}</Paragraph>
            <List
              size="small"
              dataSource={resolveWidgetFeatures(widget.features)}
              renderItem={(feature) => (
                <List.Item>
                  <Tag color="blue">{feature.label}</Tag>
                  <span>{feature.description}</span>
                </List.Item>
              )}
            />
          </Card>
        </div>
      ))}
    </Flex>
  );
}
