
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import ActivityCard from './ActivityCard';
import '../../index.css'; // Global styles
import '../../App.css'; 

export default {
  title: 'Components/Activity/ActivityCard',
  component: ActivityCard,
  decorators: [
    (Story) => (
      <MemoryRouter>
        <div style={{ maxWidth: '400px', padding: '20px' }}>
          <Story />
        </div>
      </MemoryRouter>
    ),
  ],
  tags: ['autodocs'],
};

const Template = (args) => <ActivityCard {...args} />;

export const NotStarted = Template.bind({});
NotStarted.args = {
  activity: {
    id: 1,
    title: 'Future AI Hardware Summit 2026',
    start_time: '2026-12-01T09:00:00',
    status: '即将开始',
    cover_image: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&q=80',
  },
};

export const Ongoing = Template.bind({});
Ongoing.args = {
  activity: {
    id: 2,
    title: 'Edge Computing Hackathon',
    start_time: '2025-10-20T10:00:00',
    status: '报名中',
    cover_image: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80',
  },
};

export const Ended = Template.bind({});
Ended.args = {
  activity: {
    id: 3,
    title: 'Deep Learning Workshop',
    start_time: '2023-05-15T14:00:00',
    status: '已结束',
    cover_image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80',
  },
};

export const SignedUp = Template.bind({});
SignedUp.args = {
  activity: {
    id: 4,
    title: 'Exclusive Developer Meetup',
    start_time: '2025-11-11T18:00:00',
    status: '已报名',
    cover_image: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80',
  },
};
