'use client'
import useTheme from '@/hooks/use-theme'

type LineProps = {
  className?: string
}

const Line = ({
  className,
}: LineProps) => {
  const { theme } = useTheme()
  const isDarkMode = theme === 'dark'

  if (isDarkMode) {
    return (
      <svg xmlns='http://www.w3.org/2000/svg' width='2' height='240' viewBox='0 0 2 240' fill='none' className={className}>
        <path d='M1 0L1 240' stroke='url(#paint0_linear_6295_52176)' />
        <defs>
          <linearGradient id='paint0_linear_6295_52176' x1='-7.99584' y1='240' x2='-7.88094' y2='3.95539e-05' gradientUnits='userSpaceOnUse'>
            <stop stopOpacity='0.01' />
            <stop offset='0.503965' stopColor='#C8CEDA' stopOpacity='0.14' />
            <stop offset='1' stopOpacity='0.01' />
          </linearGradient>
        </defs>
      </svg>
    )
  }

  return (
    <svg xmlns='http://www.w3.org/2000/svg' width='2' height='241' viewBox='0 0 2 241' fill='none' className={className}>
      <path d='M1 0.5L1 240.5' stroke='url(#paint0_linear_1989_74474)' />
      <defs>
        <linearGradient id='paint0_linear_1989_74474' x1='-7.99584' y1='240.5' x2='-7.88094' y2='0.50004' gradientUnits='userSpaceOnUse'>
          <stop stopColor='white' stopOpacity='0.01' />
          <stop offset='0.503965' stopColor='#101828' stopOpacity='0.08' />
          <stop offset='1' stopColor='white' stopOpacity='0.01' />
        </linearGradient>
      </defs>
    </svg>
  )
}

export default Line