import { FC } from 'react';
import { Group } from '@/components/ui/group';
import { Stack } from '@/components/ui/stack';

export interface TaskStatus {
  status: string;
  description: string;
}

export const TaskLine: FC<{ taskStatuses: TaskStatus[] }> = ({
  taskStatuses,
}) => {
  return (
    <div className="relative">
      <Stack className="">
        {taskStatuses.map((task) => (
          <Stack className="min-h-16">
            <Group className="items-center">
              <div className="mr-2 h-2 w-2 rounded-full bg-blue-5" />
              <h2 className="font-bold">{task.status}</h2>
            </Group>
            <Group className="ml-3px flex-1 border-0 border-l-2 border-blue-5">
              <div className="mr-2 h-full w-2"></div>
              <p className="text-gray-6">{task.description}</p>
            </Group>
          </Stack>
        ))}
      </Stack>
    </div>
  );
};
