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

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

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

const placeholderVisual = (
  <div className="flex aspect-video items-center justify-center rounded-[var(--radius-card)] border border-border bg-muted text-sm text-muted-foreground">
    Product screenshot
  </div>
);

export const Default: Story = {
  args: {
    eyebrow: 'Automation',
    title: 'Automate repetitive approvals',
    description:
      'Let AI triage low-risk requests automatically so your team can focus on the exceptions that actually need a human.',
    bullets: ['Faster turnaround times', 'Fewer manual errors', 'Full audit trail for compliance'],
    visual: placeholderVisual,
  },
};

export const Reversed: Story = {
  args: {
    ...Default.args,
    eyebrow: 'Insights',
    title: 'See every decision in real time',
    reverse: true,
    tone: 'muted',
  },
};

export const NoBullets: Story = {
  args: {
    title: 'Built for enterprise scale',
    description: 'Deploy across thousands of users without changing your existing infrastructure.',
    visual: placeholderVisual,
    tone: 'card',
  },
};