"use client"

import { useIntl } from "react-intl"

import { dt } from "@scandic-hotels/common/dt"
import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/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(
        {
          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}>
      <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({
              id: "jobylonFeed.card.viewAndApplyButton",
              defaultMessage: "View & apply",
            })}
            <MaterialIcon icon="open_in_new" size={20} />
          </a>
        </Button>
      </div>
    </div>
  )
}