import React, { FC } from 'react'
import { Steps as AntdSteps, StepsProps as AntdStepsProps } from 'antd'
import { StepProps } from 'antd/es/steps'
import styled from 'styled-components'
import {StepIcon} from './StepIcon'
export type StepsProps = Omit<AntdStepsProps, 'labelPlacement' | 'size' | 'status' | 'type' | 'items'> & {
	items: Omit<StepProps, 'icon' | 'description'>[]
}

const StyledSteps = styled(AntdSteps)`
  &.ant-steps-label-vertical {
    .ant-steps-item-content {
      margin-top: 5px;
    }

    .ant-steps-item-tail {
      top: 8px;
      margin-inline-start: 53px;
      padding: 4px 12px;
    }
  }

  .ant-steps-item-title {
    font-size: 12px;
    line-height: 14px;
  }

  .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
    color: #8F9296;
  }
`

export const Steps: FC<StepsProps> = ({ items, current = 0, ...props }) => {
	const formattedItems = items.map((item, index) => {
		return {
			...item,
			icon: <StepIcon active={index <= current}>{index + 1}</StepIcon>
		}
	})
	return (
		<StyledSteps labelPlacement="vertical" {...props} current={current} items={formattedItems} />
	)
}
