---
import { cn } from '@comfyorg/tailwind-utils'

interface Person {
  name: string
  role: string
}

interface Props {
  label: string
  people: Person[]
}

const { label, people } = Astro.props
---

<div class="mt-8 rounded-2xl bg-site-bg-soft p-6">
  <span
    class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
  >
    {label}
  </span>
  {
    people.map((person, i) => (
      <>
        <p
          class={cn(
            'text-sm font-semibold text-primary-comfy-canvas',
            i === 0 ? 'mt-2' : 'mt-4'
          )}
        >
          {person.name}
        </p>
        <p class="text-xs text-primary-comfy-canvas">{person.role}</p>
      </>
    ))
  }
</div>
