TimelineNew

import { Chip, useThemeColor } from 'heroui-native';
import { Timeline } from 'heroui-native-pro';
import { Text, View } from 'react-native';
import { BellIcon } from './icons/bell';
import { ShieldCheckIcon } from './icons/shield-check';
import { ShieldExclamationIcon } from './icons/shield-exclamation';

const EVENTS = [
  {
    title: 'Canary rollout started',
    description: 'Enabled for 5% of workspaces.',
    meta: 'Canary',
    metaColor: 'accent',
    status: 'current',
    time: '09:34',
    Icon: BellIcon,
  },
  {
    title: 'Regional guardrail tripped',
    description: 'Latency climbed in eu-central-1.',
    meta: 'Paused',
    metaColor: 'warning',
    status: 'warning',
    time: '09:51',
    Icon: ShieldExclamationIcon,
  },
  {
    title: 'Release checklist verified',
    description: 'Rollback owner and dashboard checks are recorded.',
    meta: 'Ready',
    metaColor: 'success',
    status: 'success',
    time: '10:42',
    Icon: ShieldCheckIcon,
  },
] as const;

export default function RolloutTimeline() {
  const [accent, warning, success] = useThemeColor([
    'accent',
    'warning',
    'success',
  ]);

  const iconColorByStatus = {
    current: accent,
    warning,
    success,
  } as const;

  return (
    <View className="flex-1 justify-center px-5">
      <Timeline density="compact" size="sm">
        {EVENTS.map((event) => {
          const Icon = event.Icon;

          return (
            <Timeline.Item
              key={event.title}
              align="center"
              status={event.status}
            >
              <Timeline.Leading className="w-11 items-end">
                <Text className="text-muted text-xs">{event.time}</Text>
              </Timeline.Leading>
              <Timeline.Rail>
                <Timeline.Marker>
                  <Icon size={12} color={iconColorByStatus[event.status]} />
                </Timeline.Marker>
                <Timeline.Connector />
              </Timeline.Rail>
              <Timeline.Content>
                <View className="flex-row flex-wrap items-center gap-2">
                  <Timeline.Title>{event.title}</Timeline.Title>
                  <Chip color={event.metaColor} size="sm" variant="soft">
                    {event.meta}
                  </Chip>
                </View>
                <Timeline.Description className="mt-1">
                  {event.description}
                </Timeline.Description>
              </Timeline.Content>
            </Timeline.Item>
          );
        })}
      </Timeline>
    </View>
  );
}