import {
  ActionIcon,
  Card,
  Group,
  Text,
  TypographyStylesProvider,
} from '@mantine/core'
import { modals } from '@mantine/modals'
import { IconPencil, IconTrash } from '@tabler/icons-react'
import { useTranslation } from 'react-i18next'

export default function AreaItem({ data, onEdit, onDelete }) {
  const { t } = useTranslation()

  const openConfirmModal = () =>
    modals.openConfirmModal({
      title: t('message_confirm_delete'),
      centered: true,
      children: (
        <TypographyStylesProvider fz={'sm'}>
          <div
            dangerouslySetInnerHTML={{
              __html: t('message_confirm_delete_note'),
            }}
          />
        </TypographyStylesProvider>
      ),
      labels: { confirm: t('ui_delete'), cancel: t('ui_cancel') },
      confirmProps: { color: 'red' },
      onConfirm: () => onDelete(data),
    })

  const onClickEdit = () => onEdit(data)

  return (
    <Card withBorder>
      <Text mb="sm" fz="sm">
        {data.name}
      </Text>
      <Text mb="sm" fz="sm">
        {data.desc}
      </Text>
      <Card.Section withBorder inheritPadding py="xs">
        <Group justify="flex-end">
          <ActionIcon variant="subtle" color="blue" onClick={onClickEdit}>
            <IconPencil size={20} />
          </ActionIcon>
          <ActionIcon variant="subtle" color="red" onClick={openConfirmModal}>
            <IconTrash size={20} />
          </ActionIcon>
        </Group>
      </Card.Section>
    </Card>
  )
}