import { ReactNode } from 'react'
import { AlertTriangle, CircleCheck, CircleX, Info } from 'lucide-react'

type TipType = 'info' | 'warning' | 'error' | 'success'

interface TipProps {
  children: ReactNode
  type?: TipType
  title?: string
}

const typeStyles: Record<TipType, { border: string; iconBg: string; icon: ReactNode; titleColor: string }> = {
  info: {
    border: 'border-[var(--color-primary)]',
    iconBg: 'bg-[var(--color-primary-solid)]',
    icon: (
      <Info className="w-3.5 h-3.5" strokeWidth={2.25} />
    ),
    titleColor: 'text-[var(--color-primary-solid)]',
  },
  warning: {
    border: 'border-[var(--color-amber)]',
    iconBg: 'bg-[var(--color-amber)]',
    icon: (
      <AlertTriangle className="w-3.5 h-3.5" strokeWidth={2.25} />
    ),
    titleColor: 'text-[var(--color-amber)]',
  },
  error: {
    border: 'border-[var(--color-red)]',
    iconBg: 'bg-[var(--color-red)]',
    icon: (
      <CircleX className="w-3.5 h-3.5" strokeWidth={2.25} />
    ),
    titleColor: 'text-[var(--color-red)]',
  },
  success: {
    border: 'border-[var(--color-success)]',
    iconBg: 'bg-[var(--color-success)]',
    icon: (
      <CircleCheck className="w-3.5 h-3.5" strokeWidth={2.25} />
    ),
    titleColor: 'text-[var(--color-success)]',
  },
}

export function Tip({ children, type = 'info', title }: TipProps) {
  const styles = typeStyles[type]

  return (
    <div
      className={`
        my-6 rounded-[var(--radius-lg)] border ${styles.border}
        bg-[var(--color-bg-elevated)] flex items-start gap-3.5
        px-5 py-4
      `}
    >
      {/* 图标 */}
      <div className={`
        flex items-center justify-center w-[22px] h-[22px] rounded-[6px] flex-shrink-0
        ${styles.iconBg} text-[var(--color-on-primary)]
      `}>
        {styles.icon}
      </div>

      {/* 内容 */}
      <div className="flex-1 min-w-0">
        {title && (
          <p className={`font-semibold text-sm mb-1.5 ${styles.titleColor}`}>
            {title}
          </p>
        )}
        <div className="text-[13px] text-[var(--color-text-secondary)] leading-[1.5]">
          {children}
        </div>
      </div>
    </div>
  )
}