web/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

"use client"

import { useIntl } from "react-intl"

import { dt } from "@scandic-hotels/common/dt"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Typography } from "@scandic-hotels/design-system/Typography"

import useLang from "@/hooks/useLang"

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

import type { JobylonItem } from "@/types/trpc/routers/jobylon"

interface JobylonCardProps {
  job: JobylonItem
}

export default function JobylonCard({ job }: JobylonCardProps) {
  const intl = useIntl()
  const lang = useLang()
  const deadlineText = job.toDate
    ? intl.formatMessage(
        {
          id: "jobylonFeed.card.deadlineText",
          defaultMessage: "Deadline: {date}",
        },
        { date: dt(job.toDate).locale(lang).format("Do MMMM") }
      )
    : intl.formatMessage({
        id: "jobylonFeed.card.openForApplication",
        defaultMessage: "Open for application",
      })

  return (
    <div className={styles.jobylonCard}>
      <Typography variant="Title/Subtitle/md">
        <h3>{job.title}</h3>
      </Typography>

      <div className={styles.contentWrapper}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <div>
            <p>{job.categories.map((cat) => cat.text).join(", ")}</p>
            <p>
              {job.locations
                .map((loc) => `${loc.city}, ${loc.country}`)
                .join(" | ")}
            </p>
            <p className={styles.deadline}>{deadlineText}</p>
          </div>
        </Typography>

        <Button
          theme="base"
          size="small"
          intent="tertiary"
          variant="icon"
          asChild
        >
          <a href={job.url} target="_blank" rel="noopener noreferrer">
            {intl.formatMessage({
              id: "jobylonFeed.card.viewAndApplyButton",
              defaultMessage: "View & apply",
            })}
            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
          </a>
        </Button>
      </div>
    </div>
  )
}