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

const meta: Meta<typeof PasswordStrengthMeter> = {
  title: 'Blocks/Auth/PasswordStrengthMeter',
  component: PasswordStrengthMeter,
  argTypes: {
    strength: {
      control: 'select',
      options: ['weak', 'medium', 'strong', null],
    },
  },
  render: args => (
    <div className="w-80">
      <PasswordStrengthMeter {...args} />
    </div>
  ),
};

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

export const Default: Story = {
  args: { strength: 'medium' },
};

export const Weak: Story = {
  args: { strength: 'weak' },
};

export const Medium: Story = {
  args: { strength: 'medium' },
};

export const Strong: Story = {
  args: { strength: 'strong' },
};

export const Empty: Story = {
  args: { strength: null },
};