veza/apps/web/src/components/notifications/NotificationItem.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { NotificationItem } from './NotificationItem';
// Mocking the Notification type interface based on component usage
import type { Notification } from '../../types';

const mockNotification: Notification = {
    id: '1',
    type: 'like',
    title: 'New Like',
    read: false,
    message: 'User X liked your post',
    timestamp: '2m ago',
    actionUrl: '/post/1',
};

const meta = {
    title: 'Components/Features/Notifications/NotificationItem',
    component: NotificationItem,
    tags: ['autodocs'],
    argTypes: {
        onRead: { action: 'read' },
        onAction: { action: 'action clicked' },
    },
} satisfies Meta<typeof NotificationItem>;

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

export const Default: Story = {
    args: {
        notification: mockNotification,
        onRead: () => {},
    },
};

export const Read: Story = {
    args: {
        notification: { ...mockNotification, read: true },
        onRead: () => {},
    },
};

export const Sale: Story = {
    args: {
        notification: {
            ...mockNotification,
            type: 'sale',
            message: 'You sold a track for $20!',
        },
        onRead: () => {},
    }
}

export const Security: Story = {
    args: {
        notification: {
            ...mockNotification,
            type: 'security',
            message: 'New login detected',
        },
        onRead: () => {},
    }
}