import {DescriptionList, Badge, Link} from "attio/client"

export function InformationDialog() {
  const handleEdit = () => {
    // Handle edit action
  }

  const handleDelete = () => {
    // Handle delete action
  }

  return (
    <DescriptionList title="Cryptids of Cornwall">
      <DescriptionList.Item label="Beast of Bodmin" icon="Eye">
        A large feline inhabiting Bodmin Moor.
      </DescriptionList.Item>
      <DescriptionList.Item label="Morgawr" icon="GlobeHemisphereEast">
        A sea serpent.
      </DescriptionList.Item>
      <DescriptionList.Item label="Owlman" icon="Moon">
        A giant owl-like creature.
      </DescriptionList.Item>
      <DescriptionList.Item label="Categories" icon="Tag">
        <Badge color="blue">Folklore</Badge>
        <Badge color="amber">Cornwall</Badge>
        <Badge color="lavender">Paranormal</Badge>
      </DescriptionList.Item>
      <DescriptionList.Menu>
        <DescriptionList.Menu.Item label="Edit" icon="Edit" onSelect={handleEdit} />
        <DescriptionList.Menu.Item
          label="Delete"
          icon="Trash"
          variant="danger"
          onSelect={handleDelete}
        />
      </DescriptionList.Menu>
    </DescriptionList>
  )
}