import type { FC } from 'react'
import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
import RichText from '@/components/RichText'

type TestimonialItem = {
  quote: SerializedEditorState
  author: string
  role?: string | null
  company?: string | null
}

type TestimonialBlockProps = {
  heading?: SerializedEditorState | null
  layout?: 'grid' | 'list' | null
  items: TestimonialItem[]
}

export const TestimonialBlock: FC<TestimonialBlockProps> = ({ heading, layout, items }) => {
  return (
    <section className="my-16">
      {heading && (
        <RichText
          className="mb-8 [&_h1]:text-4xl [&_h1]:font-bold [&_h2]:text-3xl [&_h2]:font-bold [&_h3]:text-2xl [&_h3]:font-semibold [&_p]:text-3xl [&_p]:font-bold"
          data={heading}
          enableGutter={false}
          enableProse={false}
        />
      )}

      <div className={layout === 'grid' ? 'grid gap-8 md:grid-cols-2' : 'flex flex-col gap-8'}>
        {items.map((item, index) => (
          <blockquote key={index} className="rounded-lg border p-6">
            <RichText data={item.quote} />

            <footer className="mt-4">
              <div className="font-semibold">{item.author}</div>
              {(item.role || item.company) && (
                <div className="text-sm opacity-70">
                  {item.role}
                  {item.company && ` · ${item.company}`}
                </div>
              )}
            </footer>
          </blockquote>
        ))}
      </div>
    </section>
  )
}