import { Fragment } from 'react'
import { m } from 'framer-motion'

import { DEFAULT_SPRING_TRANSITION } from '@/lib/constants'

import AnimateUnderline from '@/components/shared/AnimateUnderline'
import ParseContent from '@/components/parsers/ParseContent'

type Props = {
  specs: {
    fieldGroupName: string
    specTitle: string
    specDescription: string
  }[]
  heading: string
}

export default function ProductionSpecs({ specs, heading }: Props) {
  return (
    <section>
      <AnimateUnderline as="h2" viewportOffset="10%" className="inline-block text-xl">
        {heading}
      </AnimateUnderline>

      <dl className="flex flex-wrap gap-y-6 pt-6">
        {specs.map(({ specTitle, specDescription }, index) => (
          <Fragment key={index}>
            <div>
              <dt className="text-h5">{specTitle}</dt>
              <dd>
                <ParseContent content={specDescription} />
              </dd>
            </div>

            {index < specs.length - 1 && (
              <m.span
                className="block w-full h-px bg-black origin-left"
                initial={{ opacity: 0, scaleX: 0 }}
                whileInView={{ opacity: 1, scaleX: 1 }}
                viewport={{
                  once: true,
                  margin: `0px 0px -10% 0px`,
                }}
                transition={DEFAULT_SPRING_TRANSITION}
                aria-hidden
              />
            )}
          </Fragment>
        ))}
      </dl>
    </section>
  )
}