import { DataTable, Text } from '@moex-vibe/design-system'
import { Box } from '@mui/material'
import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
import type { DividendItem } from '@/shared/api'

interface DividendsTableProps {
  dividends: DividendItem[]
}

const columnHelper = createColumnHelper<DividendItem>()

const columns = [
  columnHelper.accessor('registryCloseDate', {
    header: 'Дата закрытия реестра',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('value', {
    header: 'Сумма',
    meta: { align: 'right' },
    cell: (info) => `${info.getValue().toFixed(2)} ${info.row.original.currency}`,
  }),
]

export function DividendsTable({ dividends }: DividendsTableProps) {
  const table = useReactTable({
    data: dividends,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <Box
      sx={{
        background: 'var(--color-surface)',
        borderRadius: 'var(--border-radius)',
        boxShadow: 'var(--shadow)',
        padding: 3,
      }}
    >
      <DataTable
        table={table}
        caption="Дивиденды"
        empty={<Text tone="secondary">Нет дивидендов</Text>}
      />
    </Box>
  )
}