"use client";

import { ColumnDef } from "@tanstack/react-table";
import { ImageSchema } from "@/lib/db/schemas/db";
import { z } from "zod";
import Image from "next/image";
import { formatDate } from "@/lib/format";

// Use a local type that aligns with the ImageDTOSchema output
export type ImagesOverview = {
  id: string;
  image_url: string;
  image_type: string;
  created_at: Date | null;
  updatedAt?: Date | null;
};

export const columns: ColumnDef<ImagesOverview>[] = [
  {
    accessorKey: "image_url",
    header: "Vorschau",
    cell: ({ row }) => {
      const url = row.getValue("image_url") as string;
      return (
        <div className="relative w-16 h-16">
          <Image src={url} alt="Image Preview" fill className="object-cover rounded-md" />
        </div>
      );
    },
  },
  {
    accessorKey: "image_type",
    header: "Typ",
  },
  {
    accessorKey: "created_at",
    header: "Erstellt am",
    cell: ({ row }) => {
      const date = row.getValue("created_at") as Date | null;
      if (!date) return "-";
      return formatDate(date);
    },
  },
];