"use client"

import { ProjectDetail } from "@/components/label/api/project/typing"
import { List, Paper, Stack, Text } from "@mantine/core"

export default function NoteRulesTable(props: {
  info: ProjectDetail.DataProps | undefined
}) {
  const rules = props.info?.comment_rule
  const textRules = rules?.text_rules ?? []
  const checkBoxRules = rules?.check_box_rules ?? []

  return (
    <Paper
      withBorder
      p="sm"
      radius="md"
      style={{ borderColor: "rgba(0,0,0,0.06)" }}>
      <Stack gap="xs">
        <Text fw={700}>批注规则</Text>

        <Stack gap={4}>
          <Text size="sm" fw={600}>
            文本规则
          </Text>
          {textRules.length ? (
            <List size="sm" spacing={4}>
              {textRules.map((r, idx) => (
                <List.Item key={idx}>{r}</List.Item>
              ))}
            </List>
          ) : (
            <Text size="sm" c="dimmed">
              -
            </Text>
          )}
        </Stack>

        <Stack gap={4}>
          <Text size="sm" fw={600}>
            勾选规则
          </Text>
          {checkBoxRules.length ? (
            <List size="sm" spacing={4}>
              {checkBoxRules.map((r, idx) => (
                <List.Item key={idx}>{String(r)}</List.Item>
              ))}
            </List>
          ) : (
            <Text size="sm" c="dimmed">
              -
            </Text>
          )}
        </Stack>
      </Stack>
    </Paper>
  )
}