import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { DescriptionList } from '../../src/ui/DescriptionList/DescriptionList';

const meta: Meta<typeof DescriptionList> = {
  title: 'UI/DescriptionList',
  component: DescriptionList,
  parameters: { layout: 'centered' },
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <div style={{ width: 360 }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
    layout: { control: 'select', options: ['inline', 'compact'] },
  },
};
export default meta;
type Story = StoryObj<typeof DescriptionList>;

const urlItems = [
  { term: 'ID_URL', detail: 'https://id.example.com/' },
  { term: 'CABINET_URL', detail: 'https://cabinet.example.com/messages' },
  { term: 'ADMIN_URL', detail: 'https://admin.example.com/' },
];

export const Inline: Story = {
  args: { items: urlItems, layout: 'inline' },
};

export const Compact: Story = {
  args: { items: urlItems, layout: 'compact' },
};

export const WithLinks: Story = {
  args: {
    layout: 'inline',
    items: urlItems.map(({ term, detail }) => ({
      term,
      detail: (
        <a href={detail as string} target="_blank" rel="noopener noreferrer">
          {detail}
        </a>
      ),
    })),
  },
};