"use client"

import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import { dt } from "@/lib/dt"

import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
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(
        {
          defaultMessage: "Deadline: {date}",
        },
        { date: dt(job.toDate).locale(lang).format("Do MMMM") }
      )
    : intl.formatMessage({
        defaultMessage: "Open for application",
      })

  return (
    <div className={styles.jobylonCard}>
      <Subtitle asChild>
        <h3>{job.title}</h3>
      </Subtitle>

      <div className={styles.contentWrapper}>
        <div>
          <Caption>{job.categories.map((cat) => cat.text).join(", ")}</Caption>
          <Caption>
            {job.locations
              .map((loc) => `${loc.city}, ${loc.country}`)
              .join(" | ")}
          </Caption>
          <Caption color="uiTextPlaceholder">{deadlineText}</Caption>
        </div>
        <Button
          theme="base"
          size="small"
          intent="tertiary"
          variant="icon"
          asChild
        >
          <a href={job.url} target="_blank" rel="noopener noreferrer">
            {intl.formatMessage({
              defaultMessage: "View & apply",
            })}
            <MaterialIcon icon="open_in_new" size={20} />
          </a>
        </Button>
      </div>
    </div>
  )
}