import type { Meta, StoryObj } from '@storybook/react';
import { Link2, Settings, Rocket, LineChart } from 'lucide-react';
import { HowItWorksSteps } from './HowItWorksSteps';
import React from 'react';

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

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

export const Default: Story = {
  args: {
    items: [
      {
        title: 'Connect',
        description: 'Link your existing tools and data sources in minutes.',
        color: 'chart-1',
      },
      {
        title: 'Configure',
        description: 'Tailor workflows and guardrails to match your processes.',
        color: 'chart-2',
      },
      {
        title: 'Launch',
        description: 'Go live with full visibility and admin controls.',
        color: 'chart-3',
      },
      {
        title: 'Optimize',
        description: 'Track adoption and refine based on real usage data.',
        color: 'success',
      },
    ],
  },
};

export const WithIcons: Story = {
  args: {
    items: [
      { icon: <Link2 />, title: 'Connect', description: 'Integrate with your stack.', color: 'info' },
      {
        icon: <Settings />,
        title: 'Configure',
        description: 'Set up workflows and permissions.',
        color: 'warning',
      },
      {
        icon: <Rocket />,
        title: 'Launch',
        description: 'Roll out to your team with confidence.',
        color: 'chart-4',
      },
      {
        icon: <LineChart />,
        title: 'Measure',
        description: 'Track outcomes with built-in analytics.',
        color: 'destructive',
      },
    ],
  },
};