import { ResumeCard } from '@/components/resume-card'
import BlurFade from '@/components/ui/blur-fade'
import { Media, SimpleListBlock } from '@/payload-types'
import { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'

const BLUR_FADE_DELAY = 0.04

type Props = {
  className: string
} & SimpleListBlock
export const SimpleList = (props: Props) => {
  return (
    <section id="work">
      <div className="flex min-h-0 flex-col gap-y-3">
        <BlurFade delay={BLUR_FADE_DELAY * 5}>
          <h2 className="text-xl font-bold">{props.listHeader}</h2>
        </BlurFade>
        {props.lineItems?.map((item, id) => {
          const avatar = item.avatar as Media | undefined

          return (
            <BlurFade key={item.title || '' + id} delay={BLUR_FADE_DELAY * 6 + id * 0.05}>
              <ResumeCard
                logoUrl={avatar?.url || ''}
                altText={avatar?.alt || ''}
                title={item.title || ''}
                subtitle={item.subtitle || ''}
                href={item.link || ''}
                badges={[]}
                period={item.extraDetail || ''}
                description={item.description as DefaultTypedEditorState}
              />
            </BlurFade>
          )
        })}
      </div>
    </section>
  )
}