import { Card, Stack, Text, Title } from '@pikku/mantine/core'
import { asI18n } from '@pikku/react'
import { m } from '@/i18n/messages'
import { useLocale } from '@/i18n/config'

type MessageCardProps = {
  message: string
  updatedAt: string
  updatedBy: {
    email: string
    name: string | null
  } | null
}

export function MessageCard(props: MessageCardProps) {
  useLocale()
  const updatedBy = props.updatedBy?.name || props.updatedBy?.email || m.message__read__nobody()

  return (
    <Card radius="xl" padding="xl" withBorder bg="rgba(10, 20, 36, 0.82)">
      <Stack gap="lg">
        <div>
          <Text
            tt="uppercase"
            fw={700}
            fz="xs"
            c="blue.3"
            mb="sm"
            style={{ letterSpacing: '0.18em' }}
          >
            {m.message__read__eyebrow()}
          </Text>
          <Title order={2}>{m.message__read__title()}</Title>
          <Text c="dimmed" mt="sm">
            {m.message__read__description()}
          </Text>
        </div>

        <Card radius="lg" padding="xl" bg="rgba(255,255,255,0.03)" withBorder>
          <Stack gap="xs">
            <Title order={1} fz="2.35rem">
              {asI18n(props.message)}
            </Title>
            <Text c="dimmed">{m.message__read__last_updated_by({ name: updatedBy })}</Text>
            <Text c="dimmed">{asI18n(new Date(props.updatedAt).toLocaleString())}</Text>
          </Stack>
        </Card>
      </Stack>
    </Card>
  )
}