import Svg, { Circle } from 'react-native-svg'

import { Text, Block } from '@/@share/components'
import { cn } from '@/utils/cn'
type ProgressProps = {
  progress: number
  className?: string
  progressClassName?: string
}

export function ProgressLine({ progress, className, progressClassName }: ProgressProps) {
  return (
    <Block className={cn('h-[3px] w-full flex-row items-center rounded-[80] bg-line', className)}>
      <Block className={cn('h-[3px] rounded-full bg-primary', progressClassName)} style={{ width: `${progress > 100 ? 100 : progress}%` }} />
    </Block>
  )
}
type ProgressRingProps = {
  radius: number
  strokeColor: string
  strokeWidth: number
  textColor: string
  progress: number
  minWidth?: number
}
export function ProgressRing({ radius, strokeColor, strokeWidth, textColor, progress, minWidth = 66 }: ProgressRingProps) {
  // Calculate the progress for the circular indicator
  const circumference = 2 * Math.PI * radius
  const strokeDashoffset = circumference - (progress / 100) * circumference
  return (
    <Block style={{ minWidth }}>
      <Block className="relative size-[44px] items-center justify-center">
        {/* Background gray ring */}
        <Block className="absolute size-[44px] items-center justify-center rounded-3xl border-[3px] border-line bg-white" />

        {/* Progress ring */}
        <Svg height="44" style={{ position: 'absolute' }} viewBox="0 0 44 44" width="44">
          <Circle
            cx="22"
            cy="22"
            fill="transparent"
            r={radius}
            stroke={strokeColor}
            strokeDasharray={circumference}
            strokeDashoffset={strokeDashoffset}
            strokeLinecap="round"
            strokeWidth={strokeWidth}
            transform="rotate(-90, 22, 22)"
          />
        </Svg>

        {/* Progress text */}
        <Text className={cn('text-center text-xs', textColor)}>{progress.toFixed(0)}%</Text>
      </Block>
    </Block>
  )
}

export default ProgressRing