Timeline

import Timeline from '@/components/ui/Timeline';
import Avatar from '@/components/ui/Avatar';
import Tag from '@/components/ui/Tag';
import { PiPaperclip } from 'react-icons/pi'

const EVENTS = [
  {
    id: 'first-comment',
    avatar: '/img/avatars/thumb-2.jpg',
    name: 'Camila Simmons',
    action: 'mentioned you in a comment',
    object: 'Post',
    time: '08:34 PM',
    mention: '@Carolyn',
    comment:
      'There are two ways to write error-free programs; only the third one works.',
  },
  {
    id: 'file-added',
    avatar: '/img/avatars/thumb-3.jpg',
    name: 'Angelina Gotelli',
    action: 'added',
    object: 'translation.xls',
    ticket: 'PD-1092',
    time: '08:09 PM',
  },
  {
    id: 'second-comment',
    avatar: '/img/avatars/thumb-3.jpg',
    name: 'Angelina Gotelli',
    action: 'mentioned you in a comment',
    object: 'Post',
    time: '08:06 PM',
    mention: '@Carolyn',
    comment:
      "Don't worry if it doesn't work right. If everything did, you'd be out of a job.",
  },
] as const;

export default function UsageDemo() {
  return (
    <div className="w-full max-w-2xl">
      <p className="mb-4 text-sm font-semibold uppercase text-muted-foreground">
        Monday, 28 February
      </p>
      <Timeline>
        {EVENTS.map((event) => (
          <Timeline.Item
            key={event.id}
            media={
              <Avatar
                size={24}
                src={event.avatar}
                alt={event.name}
              />
            }
          >
            <div className="grid gap-4">
              <div className="flex flex-wrap items-center gap-2 text-sm">
                <span className="font-medium">
                  {event.name}
                </span>
                <span className="text-muted-foreground">
                  {event.action}
                </span>
                {event.id === 'file-added' ? (
                  <span className="inline-flex items-center gap-2 text-foreground">
                    <PiPaperclip className="size-3.5" />
                    {event.object}
                  </span>
                ) : (
                  <span className="font-semibold text-foreground">
                    {event.object}
                  </span>
                )}
                {'ticket' in event ? (
                  <>
                    <span className="text-muted-foreground">to ticket</span>
                    <Tag
                      size="sm"
                      className="bg-card"
                    >
                      {event.ticket}
                    </Tag>
                  </>
                ) : null}
                <span className="text-muted-foreground">{event.time}</span>
              </div>
              {'comment' in event ? (
                <div className="rounded-control border bg-card px-4 py-3 text-sm text-foreground">
                  <Tag
                    size="sm"
                    className="border-transparent bg-palette-blue-soft text-palette-blue-soft-foreground"
                  >
                    {event.mention}
                  </Tag>{' '}
                  {event.comment}
                </div>
              ) : null}
            </div>
          </Timeline.Item>
        ))}
      </Timeline>
    </div>
  );
}