import type { Meta, StoryObj } from '@storybook/react';
import { AuthPageShell } from './AuthPageShell';
import React from 'react';

const meta: Meta<typeof AuthPageShell> = {
  title: 'Blocks/Auth/AuthPageShell',
  component: AuthPageShell,
};

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

export const ImagePanel: Story = {
  args: {
    leftPanel: 'image',
    imageSrc:
      'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&q=80',
    imageAlt: 'Team collaborating around a laptop',
    children: (
      <div className="space-y-2 text-center">
        <h1 className="text-xl font-semibold">Bem-vindo de volta</h1>
        <p className="text-sm text-muted-foreground">Entre com sua conta para continuar.</p>
      </div>
    ),
  },
};

export const IsotypePanel: Story = {
  args: {
    leftPanel: 'isotype',
    children: (
      <div className="space-y-2 text-center">
        <h1 className="text-xl font-semibold">Esqueceu sua senha?</h1>
        <p className="text-sm text-muted-foreground">
          Informe seu e-mail para receber instruções de redefinição.
        </p>
      </div>
    ),
  },
};

export const CustomGradient: Story = {
  args: {
    leftPanel: 'image',
    imageSrc:
      'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&q=80',
    imageAlt: 'Team collaborating around a laptop',
    gradientClassName: 'bg-gradient-to-br from-fuchsia-600/80 to-blue-700/80',
    children: (
      <div className="space-y-2 text-center">
        <h1 className="text-xl font-semibold">Crie sua conta</h1>
        <p className="text-sm text-muted-foreground">Comece gratuitamente hoje mesmo.</p>
      </div>
    ),
  },
};