import { FC } from 'react';
import { Card, Flex, Text } from '@servicetitan/anvil2';
import { MarkdownText } from '../markdown-text';

interface NotificationCardProps {
    title: string;
    message: string;
    timestamp: string;
    unread?: boolean;
    onClick?: () => void;
}

export const NotificationCard: FC<NotificationCardProps> = ({
    title,
    message,
    timestamp,
    onClick,
    unread = false,
}) => {
    return (
        <Card
            onClick={onClick}
            style={{
                cursor: 'pointer',
            }}
        >
            <Flex direction="column" gap={2} style={{ width: '100%' }}>
                <Flex alignItems="center" justifyContent="space-between">
                    <Text size="medium" style={{ color: '#0067E4' }}>
                        {unread ? <b>{title}</b> : title}
                    </Text>
                    <Flex alignItems="center" gap={1}>
                        <Text size="small" style={{ color: '#6B6B6B' }}>
                            {timestamp}
                            {unread && (
                                <span
                                    style={{
                                        display: 'inline-block',
                                        width: 12,
                                        height: 12,
                                        borderRadius: '50%',
                                        background: '#E23D18',
                                        marginLeft: 8,
                                    }}
                                />
                            )}
                        </Text>
                    </Flex>
                </Flex>

                <Text size="small" style={{ color: '#6B6B6B' }}>
                    {unread ? (
                        <b>
                            <MarkdownText text={message} />
                        </b>
                    ) : (
                        <MarkdownText text={message} />
                    )}
                </Text>
            </Flex>
        </Card>
    );
};