import { Timeline as ChakraTimeline } from '@chakra-ui/react';
import * as React from 'react';

interface TimelineConnectorProps extends ChakraTimeline.IndicatorProps {
  icon?: React.ReactNode;
}

export const TimelineConnector = React.forwardRef<HTMLDivElement, TimelineConnectorProps>(function TimelineConnector(
  { icon, ...props },
  ref,
) {
  return (
    <ChakraTimeline.Connector ref={ref}>
      <ChakraTimeline.Separator />
      <ChakraTimeline.Indicator {...props}>{icon}</ChakraTimeline.Indicator>
    </ChakraTimeline.Connector>
  );
});

export const TimelineRoot = ChakraTimeline.Root;
export const TimelineContent = ChakraTimeline.Content;
export const TimelineItem = ChakraTimeline.Item;
export const TimelineIndicator = ChakraTimeline.Indicator;
export const TimelineTitle = ChakraTimeline.Title;
export const TimelineDescription = ChakraTimeline.Description;