import { selectEnabledFaqs } from '@linktr.ee/messaging-taxonomy'
import React from 'react'

import { Avatar } from '../Avatar'

import { FaqListItem } from './FaqListItem'

export interface Faq {
  id: string
  question: string
  answer: string
  enabled: boolean
  order?: number | null
}

export interface FaqListProps {
  faqs: Faq[]
  onFaqClick: (faqId: string) => void
  loadingFaqId?: string | null
  headerText?: string
  className?: string
  avatarImage?: string
  avatarName?: string
}

export const FaqList: React.FC<FaqListProps> = ({
  faqs,
  onFaqClick,
  loadingFaqId,
  headerText,
  className,
  avatarImage,
  avatarName,
}) => {
  const enabledFaqs = selectEnabledFaqs(faqs)

  if (enabledFaqs.length === 0) {
    return null
  }

  return (
    <div className={className}>
      <div className="flex gap-3 items-end">
        {/* Avatar at bottom-left, outside grey background */}
        {(avatarImage || avatarName) && (
          <div className="flex-none">
            <Avatar
              id={avatarName || 'account'}
              name={avatarName || 'Account'}
              image={avatarImage}
              size={24}
              shape="circle"
            />
          </div>
        )}

        {/* FAQs with grey background */}
        <div
          className="flex-1 flex flex-col gap-3 rounded-lg p-4"
          style={{ backgroundColor: '#F1F0EE' }}
        >
          {headerText && (
            <p className="text-md text-charcoal mb-4">{headerText}</p>
          )}
          {enabledFaqs.map((faq) => (
            <FaqListItem
              key={faq.id}
              question={faq.question}
              onClick={() => onFaqClick(faq.id)}
              loading={loadingFaqId === faq.id}
            />
          ))}
        </div>
      </div>
    </div>
  )
}