import type { Meta, StoryObj } from '@storybook/vue3';
import TitanInfoPanel from './TitanInfoPanel.vue';

const meta = {
  component: TitanInfoPanel,
  title: 'UI/TitanInfoPanel',
  tags: ['autodocs'],
  argTypes: {
    title: {
      control: 'text',
      description: 'The title/heading text for the info panel',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: '' },
      },
    },
    items: {
      control: 'object',
      description: 'Array of bullet point items to display',
      table: {
        type: { summary: 'string[]' },
        defaultValue: { summary: '[]' },
      },
    },
    variant: {
      control: 'select',
      options: ['default', 'compact', 'transparent'],
      description: 'Visual variant of the panel',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'default' },
      },
    },
  },
  parameters: {
    backgrounds: {
      default: 'light',
    },
  },
} satisfies Meta<typeof TitanInfoPanel>;

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * Default variant with semi-transparent green background, border, and shadow.
 * This is the primary informational panel style.
 */
export const Default: Story = {
  args: {
    title: 'Tips for a great photo',
    items: [
      'Use a high resolution image',
      'Make sure they\'re facing the camera',
      'Ensure good lighting',
    ],
    variant: 'default',
  },
};

/**
 * Compact variant with lighter background and subtle border.
 * Ideal for less prominent informational content.
 */
export const Compact: Story = {
  args: {
    title: 'Important Information',
    items: [
      'Please review all details carefully',
      'Contact support if you need help',
    ],
    variant: 'compact',
  },
};

/**
 * Transparent variant with minimal background and border only.
 * Best for integrating seamlessly with other UI elements.
 */
export const Transparent: Story = {
  args: {
    title: 'Quick Tips',
    items: [
      'Double-check your selections',
      'Save your progress regularly',
    ],
    variant: 'transparent',
  },
};

/**
 * Panel without a title, showing only bullet items.
 */
export const NoTitle: Story = {
  args: {
    items: [
      'First important point',
      'Second important point',
      'Third important point',
    ],
    variant: 'default',
  },
};

/**
 * Panel with single item for simple messages.
 */
export const SingleItem: Story = {
  args: {
    title: 'Note',
    items: [
      'This is a single important message to remember',
    ],
    variant: 'default',
  },
};

/**
 * Panel with longer content to demonstrate wrapping and spacing.
 */
export const LongContent: Story = {
  args: {
    title: 'Detailed Guidelines',
    items: [
      'For the best results, please ensure your photo is taken in natural lighting conditions with the subject clearly visible',
      'The image should be in high resolution (at least 1920x1080 pixels) to ensure clarity when displayed',
      'Make sure there are no obstructions blocking the subject of the photo',
      'Center the subject in the frame for optimal composition',
    ],
    variant: 'default',
  },
};

/**
 * Interactive playground for all panel props.
 * Use the Controls panel to experiment with different combinations.
 */
export const Playground: Story = {
  args: {
    title: 'Tips for a great photo',
    items: [
      'Use a high resolution image',
      'Make sure they\'re facing the camera',
    ],
    variant: 'default',
  },
};