'use client'

import styles from './styles.module.scss'
import Image from 'next/image'
import family from './family.svg'
import bible from './bible.svg'
import { useState } from 'react'
import Link from 'next/link'
import classNames from 'classnames'
import { useTime } from '@/hooks/useTime'

export type MassTableRowProps = {
  id: string
  date: string
  type: 'MASS' | 'FAMILY' | 'WORD'
  cancelled: boolean
}

export const MassTableRow = ({
  id,
  date,
  type,
  cancelled,
}: MassTableRowProps) => {
  const [symbol, setSymbol] = useState('')
  const time = useTime(date)
  //const compactDate = useCompactDate(date)
  //const day = useShortDayName(date)
  const day = new Date(date).toLocaleDateString("de-DE", {weekday: 'long'})

  return (
    <Link
      href={`/gottesdienst/${id}`}
      className={classNames({ [styles.cancelled]: cancelled }, styles.link)}
    >
      <div
        className={styles.row}
        onMouseEnter={() => setSymbol('†')}
        onMouseLeave={() => setSymbol('')}
      >
        <div className={styles.day}>{day}</div>
        <div className={styles.symbol}>{symbol}</div>
        <div className={styles.time}>
          {time}

          {type === 'FAMILY' && (
            <Image src={family} width={18} height={18} alt={'Familien Messe'} />
          )}

          {type === 'WORD' && (
            <Image src={bible} width={18} height={18} alt={'Wortgottesfeier'} />
          )}
        </div>
      </div>
    </Link>
  )
}