import React from "react";

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

import { TableCell } from "../../../components/Table/TableCell";
import { NavigatingTableRow } from "../../../components/Table/TableRow";
import { ProductList } from "../types/product";

export interface ProductRowProps {
  product: ProductList;
}

export const ProductRow: React.FC<ProductRowProps> = ({ product }) => (
  <NavigatingTableRow route="pim.product:detail" routeParams={{ id: product.id }}>
    <TableCell
      sx={{ py: 0.75 }}
      typographyProps={{
        component: "div",
        sx: { display: "flex", alignItems: "center", width: 48 },
      }}
    >
      {product.image_url ? (
        <Box
          alt=""
          component="img"
          src={product.image_url}
          sx={{
            width: 48,
            height: 48,
            borderRadius: 1,
            bgcolor: "background.default",
            objectFit: "cover",
          }}
        />
      ) : (
        <Box
          sx={{
            width: 48,
            height: 48,
            borderRadius: 1,
            bgcolor: "action.hover",
          }}
        />
      )}
    </TableCell>
    <TableCell>{product.name}</TableCell>
    <TableCell>{product.item_type}</TableCell>
    <TableCell>{product.number}</TableCell>
    <TableCell align="right">
      {product.is_active ? <CheckCircleIcon color="success" /> : <CancelIcon color="error" />}
    </TableCell>
  </NavigatingTableRow>
);