"use client"

import type { ColumnDef } from "@tanstack/react-table"
import { Link } from "@/i18n/navigation"
import {useMemo} from "react"
import {useTranslations} from "next-intl"

import { PageHeader } from "@/components/page-header"
import { SuperDataTable } from "@/components/super-data-table"
import { Button } from "@/components/ui/button"

type ChannelRow = {
  id: string
  code: string
  name: string
}

const data: ChannelRow[] = [
  { id: "default", code: "default", name: "Default channel" },
  { id: "mobile", code: "mobile", name: "Mobile channel" },
]

export default function Page() {
  const t = useTranslations("Channels")
  const tc = useTranslations("Common")

  const columns = useMemo<ColumnDef<ChannelRow>[]>(
    () => [
      { accessorKey: "code", header: t("columns.code") },
      { accessorKey: "name", header: t("columns.name") },
    ],
    [t]
  )

  return (
    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
      <PageHeader title={t("title")} />
      <SuperDataTable
        data={data}
        columns={columns}
        searchKey="name"
        searchPlaceholder={tc("placeholders.searchChannels")}
        actionsForRow={(row) => [
          { type: "link", label: tc("actions.edit"), href: () => `/channels/${row.id}/edit` },
        ]}
      />
      <div className="px-4 lg:px-6 text-sm text-muted-foreground">
        {t("note")}
      </div>
    </div>
  )
}