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

import ACTIVITY_FEED_JSON from '@/__fixtures__/activity_feed.json';
import Link from '@/components/link/Link';
import { CaretRightIcon } from '@/icons';

import { ActivityFeedItem } from './ActivityFeedItem';

// Create a simplified version of ActivityFeedHome that shows the layout with mock data
const ActivityFeedHomeStory = ({
  showItems = true,
}: {
  showItems?: boolean;
}) => {
  return (
    <section className='flex flex-col gap-3'>
      <Link
        href={'/activity'}
        className='flex cursor-pointer flex-row items-center hover:underline'
      >
        <span className='line-clamp-1 font-sans text-[20px] leading-[24px] font-semibold'>
          Activity Feed
        </span>
        <CaretRightIcon className='h-6 w-6 pt-0.5 text-foreground-tertiary' />
      </Link>
      <div className='grid gap-4 lg:grid-cols-2 2xl:grid-cols-3'>
        {showItems ? (
          ACTIVITY_FEED_JSON.items.map((item: any) => (
            <ActivityFeedItem
              data={item}
              key={item.feed_timestamp}
              showFullFeed={false}
            />
          ))
        ) : (
          <div className='col-span-full flex items-center justify-center py-8'>
            <p className='text-foreground-secondary'>No activity yet</p>
          </div>
        )}
      </div>
    </section>
  );
};

type PagePropsAndCustomArgs = {
  showItems?: boolean;
};

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/feed/ActivityFeedHome',
  component: ActivityFeedHomeStory,
  parameters: {
    layout: 'padded',
  },
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

export const Default: Story = {
  args: {
    showItems: true,
  },
};

export const Empty: Story = {
  args: {
    showItems: false,
  },
};