import type { Meta, StoryObj } from '@storybook/nextjs-vite';
import { ExperienceCard } from './ExperienceCard';

const meta: Meta<typeof ExperienceCard> = {
  title: 'Entities/ExperienceCard',
  component: ExperienceCard,
  decorators: [
    (Story) => (
      <div className="p-8 bg-white max-w-2xl">
        <Story />
      </div>
    ),
  ],
};

export default meta;

type Story = StoryObj<typeof ExperienceCard>;

const baseArgs = {
  title: 'Senior Frontend Engineer',
  company: 'Acme Corp',
  period: '2021 – 2024',
  description:
    'Led frontend development for the core product, established design system practices, and mentored junior engineers across two distributed teams.',
};

export const Default: Story = {
  args: baseArgs,
};

export const SlateBackground: Story = {
  render: () => (
    <div className="bg-slate-indigo p-8 max-w-2xl">
      <ExperienceCard {...baseArgs} className="border-ochre-clay" />
    </div>
  ),
};