"use client"

import { useIntl } from "react-intl"

import { dt } from "@scandic-hotels/common/dt"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
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>

        <ButtonLink
          size="sm"
          variant="Tertiary"
          href={job.url}
          target="_blank"
          rel="noopener noreferrer"
          trailingIconName="open_in_new"
        >
          {intl.formatMessage({
            id: "jobylonFeed.card.viewAndApplyButton",
            defaultMessage: "View & apply",
          })}
        </ButtonLink>
      </div>
    </div>
  )
}