import { AppstoreOutlined } from '@ant-design/icons';
import { Space, Tag, Typography } from 'antd';
import { forwardRef } from 'react';
import { WidgetShell } from '../core';
import type { SampleMeta, WidgetHandle } from '../core';

const { Paragraph, Text } = Typography;

export type ApiSampleCardWidgetProps = {
  sampleMeta: SampleMeta;
  cardWrapper?: boolean;
  children: React.ReactNode;
};

export const ApiSampleCardWidget = forwardRef<WidgetHandle, ApiSampleCardWidgetProps>(
  function ApiSampleCardWidget({ sampleMeta, cardWrapper, children }, ref) {
    return (
      <WidgetShell
        ref={ref}
        id={sampleMeta.id}
        title={sampleMeta.title}
        cardWrapper={cardWrapper}
        features={[
          'api-sample',
          'component-sample',
          'feature-registry',
          'imperative-handle',
          ...(sampleMeta.features ?? []),
        ]}
        featureSlot={
          <Tag icon={<AppstoreOutlined />} color="geekblue">
            {sampleMeta.category}
          </Tag>
        }
      >
        <Space direction="vertical" size={12} className="widget-shell__body">
          <Paragraph className="widget-shell__description">{sampleMeta.description}</Paragraph>
          <Text code>{sampleMeta.id}</Text>
          <div>{children}</div>
        </Space>
      </WidgetShell>
    );
  },
);
