import { ActionIcon, Group, Text, Tooltip } from "@mantine/core";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import type { MRT_ColumnDef } from "mantine-react-table";
import type { PromptRow } from "./prompt.types";

export const promptColumns = (
  onEdit: (row: PromptRow) => void,
  onDelete: (row: PromptRow) => void,
): MRT_ColumnDef<PromptRow>[] => [
  {
    accessorKey: "prompt_name",
    header: "Name",
    Header: () => <Text size="xs" fw={600}>Name</Text>,
    Cell: ({ row }) => <Text size="xs" fw={500}>{row.original.prompt_name}</Text>,
  },
  {
    accessorKey: "prompt_value",
    header: "Preview",
    Header: () => <Text size="xs" fw={600}>Preview</Text>,
    Cell: ({ row }) => (
      <Text size="xs" c="dimmed" lineClamp={2} style={{ maxWidth: 400 }}>
        {row.original.prompt_value}
      </Text>
    ),
  },
  {
    accessorKey: "created_by",
    header: "Created By",
    Header: () => <Text size="xs" fw={600}>Created By</Text>,
    Cell: ({ row }) => <Text size="xs">{row.original.created_by}</Text>,
  },
  {
    id: "actions",
    header: "Actions",
    Header: () => <Text size="xs" fw={600}>Actions</Text>,
    enableSorting: false,
    Cell: ({ row }) => (
      <Group gap={4} wrap="nowrap">
        <Tooltip label="Edit">
          <ActionIcon size="sm" variant="subtle" color="blue" onClick={() => onEdit(row.original)}>
            <IconEdit size={14} />
          </ActionIcon>
        </Tooltip>
        <Tooltip label="Delete">
          <ActionIcon size="sm" variant="subtle" color="red" onClick={() => onDelete(row.original)}>
            <IconTrash size={14} />
          </ActionIcon>
        </Tooltip>
      </Group>
    ),
  },
];