"use client";

import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
import moment from "moment";
import { MODEL_EVENT } from "../../model/interface";
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
import { AccentColor } from "@/app_modules/_global/color/color_pallet";
import {
  ComponentGlobal_AvatarAndUsername,
  ComponentGlobal_CardStyles,
} from "@/app_modules/_global/component";

export default function ComponentEvent_DetailMainData({
  data,
}: {
  data: MODEL_EVENT;
}) {
  const tgl = data.tanggal;
  const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });

  const jam = tgl.toLocaleTimeString([], {
    timeStyle: "short",
    hourCycle: "h24",
  });

  return (
    <>
      <ComponentGlobal_CardStyles>
        <Stack px={"xs"} spacing={"xl"}>
          <ComponentGlobal_AvatarAndUsername
            profile={data?.Author?.Profile as any}
          />

          <Stack>
            <Title align="center" order={4}>
              {data ? data.title : null}
            </Title>
            <Grid>
              <Grid.Col span={4}>
                <Text fw={"bold"} fz={"sm"}>
                  Lokasi
                </Text>
              </Grid.Col>
              <Grid.Col span={1}>:</Grid.Col>
              <Grid.Col span={"auto"}>
                <Text>{data ? data.lokasi : null}</Text>
              </Grid.Col>
            </Grid>
            <Grid>
              <Grid.Col span={4}>
                <Text fw={"bold"} fz={"sm"}>
                  Tipe Acara
                </Text>
              </Grid.Col>
              <Grid.Col span={1}>:</Grid.Col>
              <Grid.Col span={"auto"}>
                <Text>{data ? data.EventMaster_TipeAcara.name : null}</Text>
              </Grid.Col>
            </Grid>
            <Grid>
              <Grid.Col span={4}>
                <Text fw={"bold"} fz={"sm"}>
                  Tanggal
                </Text>
              </Grid.Col>
              <Grid.Col span={1}>:</Grid.Col>
              <Grid.Col span={"auto"}>{hari}</Grid.Col>
            </Grid>
            <Grid>
              <Grid.Col span={4}>
                <Text fw={"bold"} fz={"sm"}>
                  Jam
                </Text>
              </Grid.Col>
              <Grid.Col span={1}>:</Grid.Col>
              <Grid.Col span={"auto"}>{jam}</Grid.Col>
            </Grid>
            <Stack spacing={2}>
              <Text fw={"bold"} fz={"sm"}>
                Deskripsi
              </Text>
              <Text>{data ? data?.deskripsi : null}</Text>
            </Stack>
          </Stack>
        </Stack>
      </ComponentGlobal_CardStyles>
    </>
  );
}
