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

const meta = {
  component: TitanSubheader,
  title: 'UI/TitanSubheader',
  tags: ['autodocs'],
  argTypes: {
    text: {
      control: 'text',
      description: 'The heading text to display (automatically uppercased)',
    },
    class: {
      control: 'text',
      description: 'Additional CSS classes to apply',
    },
  },
} satisfies Meta<typeof TitanSubheader>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default subheader with standard text.
 * Commonly used to separate sections within forms.
 */
export const Default: Story = {
  args: {
    text: 'What are you envisioning for the parade elements?',
  },
}

/**
 * Subheader with short text.
 */
export const ShortText: Story = {
  args: {
    text: 'Personal Details',
  },
}

/**
 * Subheader with very long text to test wrapping behavior.
 */
export const LongText: Story = {
  args: {
    text: 'This is a very long subheader text that might wrap to multiple lines depending on the container width and responsive behavior',
  },
}

/**
 * Subheader with custom CSS classes applied.
 */
export const CustomStyling: Story = {
  args: {
    text: 'Custom styled section',
    class: 'text-titan-purple-500',
  },
}

/**
 * Multiple subheaders showing typical form section usage.
 */
export const InFormContext: Story = {
  render: () => ({
    components: { TitanSubheader },
    template: `
      <div class="space-y-6">
        <TitanSubheader text="Section 1: Basic Information" />
        <div class="text-sm text-gray-600 ml-4">Form fields would go here...</div>

        <TitanSubheader text="Section 2: Contact Details" />
        <div class="text-sm text-gray-600 ml-4">Form fields would go here...</div>

        <TitanSubheader text="Section 3: Additional Notes" />
        <div class="text-sm text-gray-600 ml-4">Form fields would go here...</div>
      </div>
    `,
  }),
}

/**
 * Subheader within a card, showing real-world usage context.
 */
export const InCardContext: Story = {
  render: () => ({
    components: { TitanSubheader },
    template: `
      <div class="bg-white rounded-lg shadow-sm p-6 max-w-2xl">
        <h2 class="text-xl font-bold mb-6">Form Title</h2>

        <TitanSubheader text="What are you envisioning for the parade elements?" />
        <textarea class="w-full mt-4 p-3 border rounded" rows="3" placeholder="Notes"></textarea>

        <div class="mt-6">
          <TitanSubheader text="Any particular colors you would like represented?" />
          <textarea class="w-full mt-4 p-3 border rounded" rows="3" placeholder="Notes"></textarea>
        </div>
      </div>
    `,
  }),
}