import React from "react";

import CancelIcon from "@mui/icons-material/Cancel";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";

import { TableCell } from "../../../components/Table/TableCell";
import { NavigatingTableRow } from "../../../components/Table/TableRow";
import { ArticleList } from "../types/article";

export interface ArticleRowProps {
  article: ArticleList;
}

export const ArticleRow: React.FC<ArticleRowProps> = ({ article }) => (
  <NavigatingTableRow route="catalog.article:detail" routeParams={{ id: article.id }}>
    <TableCell>{article.name}</TableCell>
    <TableCell>{article.variant}</TableCell>
    <TableCell>{article.item_type}</TableCell>
    <TableCell>{article.code}</TableCell>
    <TableCell align="right">
      {article.is_active ? <CheckCircleIcon color="success" /> : <CancelIcon color="error" />}
    </TableCell>
  </NavigatingTableRow>
);