import { getJobylonFeed } from "@/lib/trpc/memoizedRequests"

import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"

import JobylonCard from "./JobylonCard"

import styles from "./jobylonFeed.module.css"

interface JobylonFeedProps {
  title?: string
  subtitle?: string
  link?: { href: string; text: string }
}

export default async function JobylonFeed({
  title,
  subtitle,
  link,
}: JobylonFeedProps) {
  const intl = await getIntl()
  const allJobs = await getJobylonFeed()

  if (!allJobs) {
    return null
  }

  return (
    <SectionContainer>
      <SectionHeader
        link={link}
        preamble={subtitle}
        title={title}
        headingAs="h3"
        headingLevel="h2"
      />
      <div className={styles.content}>
        <Subtitle type="two">
          {intl.formatMessage(
            {
              id: "{count, plural, one {{count} Result} other {{count} Results}}",
            },
            { count: allJobs.length }
          )}
        </Subtitle>
        <ul className={styles.list}>
          {allJobs.map((job) => (
            <li key={job.id}>
              <JobylonCard job={job} />
            </li>
          ))}
        </ul>
      </div>
      <SectionLink link={link} variant="mobile" />
    </SectionContainer>
  )
}