import { Meta, StoryObj } from '@storybook/react'
import { Collapsible } from './Collapsible'

const meta: Meta<typeof Collapsible> = {
  component: Collapsible,
}

type Story = StoryObj<typeof Collapsible>
export default meta

export const Default: Story = {
  args: {
    title: 'Wann finden die Gottesdienste statt?',
    children: 'Unsere Gottesdienste finden jeden Sonntag um 10:00 Uhr statt.',
  },
}

export const OpenByDefault: Story = {
  args: {
    title: 'Wo kann ich parken?',
    defaultOpen: true,
    children:
      'Direkt vor der Kirche stehen Parkplätze zur Verfügung. Weitere Parkplätze finden Sie in den umliegenden Straßen.',
  },
}

export const LongContent: Story = {
  args: {
    title: 'Wie kann ich Mitglied werden?',
    children: (
      <>
        <p>
          Um Mitglied unserer Gemeinde zu werden, können Sie sich direkt an das
          Pfarrbüro wenden. Dort erhalten Sie alle notwendigen Informationen und
          Formulare.
        </p>
        <p>
          Wir freuen uns über jedes neue Mitglied und laden Sie herzlich ein,
          unsere Gemeinschaft kennenzulernen. Neben den regelmäßigen
          Gottesdiensten gibt es zahlreiche Gruppen und Veranstaltungen, an
          denen Sie teilnehmen können.
        </p>
        <p>
          Bei Fragen stehen Ihnen unsere Mitarbeiter gerne telefonisch, per
          E-Mail oder persönlich zur Verfügung.
        </p>
      </>
    ),
  },
}

export const ListOfThree: Story = {
  render: () => (
    <div>
      <Collapsible title="Wann finden die Gottesdienste statt?">
        Unsere Gottesdienste finden jeden Sonntag um 10:00 Uhr statt.
      </Collapsible>
      <Collapsible title="Wo kann ich parken?">
        Direkt vor der Kirche stehen Parkplätze zur Verfügung.
      </Collapsible>
      <Collapsible title="Wie erreiche ich das Pfarrbüro?">
        Das Pfarrbüro ist montags bis freitags von 9:00 bis 12:00 Uhr geöffnet.
      </Collapsible>
    </div>
  ),
}