'use client'

interface DaliBotQuickRepliesProps {
  replies: string[]
  onSelect: (reply: string) => void
  disabled?: boolean
}

export function DaliBotQuickReplies({ replies, onSelect, disabled }: DaliBotQuickRepliesProps) {
  if (!replies.length) return null

  return (
    <div className="flex flex-wrap gap-2 pl-0">
      {replies.map((reply) => (
        <button
          key={reply}
          onClick={() => !disabled && onSelect(reply)}
          disabled={disabled}
          className="px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed"
          style={{
            background: 'rgba(99, 102, 241, 0.10)',
            border: '1px solid var(--dt-border-accent)',
            color: 'var(--dt-accent-bright)',
          }}
          onMouseEnter={(e) => {
            if (!disabled) {
              (e.currentTarget as HTMLElement).style.background = 'rgba(99, 102, 241, 0.20)'
            }
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLElement).style.background = 'rgba(99, 102, 241, 0.10)'
          }}
        >
          {reply}
        </button>
      ))}
    </div>
  )
}