'use client'

import cn from 'classnames'
import type { ReactNode } from 'react'

export type TStepStatus = 'completed' | 'incomplete' | 'current'

export interface IPktStep {
  /**
   * Step content. Can be a string, a React component or an element.
   */
  children?: ReactNode
  /**
   * Additional class names
   */
  className?: string
  /**
   * Step status. Can be 'completed', 'incomplete' or 'current'
   */
  status: TStepStatus
  /**
   * Title of the step
   */
  title: string
}

const incompleteStepSVG = (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
    <circle cx="12" cy="12" r="7" style={{ fill: 'var(--pkt-color-grays-grey-200, #CCC)' }} />
  </svg>
)

const currentStepSVG = (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
    <circle opacity=".15" cx="12" cy="12" r="12" fill="#2A2859" />
    <circle cx="12" cy="12" r="6" fill="#2A2859" />
  </svg>
)

const completedStepSVG = (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
    <path fill="#2A2859" d="M3 3h18v18H3z" />
    <path d="m10.34 16-1.11-1.14L7 12.58l1.11-1.15 2.23 2.28L15.88 8 17 9.15l-5.55 5.71L10.34 16Z" fill="#F1FDFF" />
  </svg>
)

export const PktStep = ({ children, className, status = 'incomplete', title }: IPktStep) => {
  return (
    <li className={cn('pkt-step', className, `pkt-step--${status}`)} data-testid="pkt-step">
      <span className="pkt-step__line pkt-step__line--1" aria-hidden></span>
      <span className="pkt-step__line pkt-step__line--2" aria-hidden></span>
      <span className={cn('pkt-step__indicator')}>
        {status === 'current' ? currentStepSVG : status === 'completed' ? completedStepSVG : incompleteStepSVG}
      </span>
      <span className="pkt-step__line pkt-step__line--3" aria-hidden />
      <div className="pkt-step__wrapper">
        <div className="pkt-step__title">{title}</div>
        <div className="pkt-step__content">{children}</div>
      </div>
    </li>
  )
}