import { useTranslation } from 'react-i18next';
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
} from '@/components/ui/table';
import { useFormatPrefs } from '@/lib/date';
import { type TaskItem } from './task-types';
import { TaskTableRow } from './TaskTableRow';

interface Props {
  tasks: TaskItem[];
  hideProjectColumn?: boolean;
  onRowClick: (task: TaskItem) => void;
  onEdit: (task: TaskItem) => void;
  onDelete: (id: string) => void;
  onStatusChange: (id: string, status: string) => void;
}

export function TaskTable({
  tasks,
  hideProjectColumn,
  onRowClick,
  onEdit,
  onDelete,
  onStatusChange,
}: Props) {
  const { t } = useTranslation();
  const prefs = useFormatPrefs();

  return (
    <div className="rounded-lg border border-border/50 bg-card/65 backdrop-blur-xl shadow-sm overflow-hidden">
      <Table>
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead>{t('tasks.colTask')}</TableHead>
            {!hideProjectColumn && <TableHead>{t('tasks.colProject')}</TableHead>}
            <TableHead>{t('tasks.colPriority')}</TableHead>
            <TableHead>{t('tasks.colDue')}</TableHead>
            <TableHead>{t('tasks.colAssignee')}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {tasks.map((task) => (
            <TaskTableRow
              key={task.id}
              task={task}
              hideProjectColumn={hideProjectColumn}
              onClick={() => onRowClick(task)}
              onEdit={() => onEdit(task)}
              onDelete={() => onDelete(task.id)}
              onStatusChange={(s) => onStatusChange(task.id, s)}
              prefs={prefs}
            />
          ))}
        </TableBody>
      </Table>
    </div>
  );
}
