import { Grid } from "@mui/material";
import { ProductCardProps } from "../../interfaces/ProductCard";
import { Card } from "../Card";
import { IconCardStyle, ProductCardStyle, TitleContainer } from "./ProductCard.style";
import React from "react";
import { IconButton } from "../IconButton";
import GradeIcon from '@mui/icons-material/Grade'
import { Icons } from '../Icons'
import { IconScale, IconType } from "../../types";


export const ProductCard: React.FC<ProductCardProps> = ({
  // product = 'analytics'
  color,
  icon,
  onClick,
  hasBorder = true,
  disabled = false,
  title,
  description,
  favorite,
}) => {

  /* const colors: { [key: string]: string } = {
    primaryDark: '#B74608',
    primaryLight: '#FCF1E3',
    secondaryDark: '#6788B8',
    secondaryLight: '#EEF7FB'
  }
*/
  return (
    <ProductCardStyle disabled={disabled} $bColor={icon?.iconColor} hasBorder={hasBorder}>
      <Card
        variant="outlined"
        onClick={() => onClick && onClick()}
      >
        {favorite && (
          <Grid container justifyContent={'flex-end'} alignItems={'flex-start'} position={'relative'}>
            <Grid item>
              <IconButton
                sx={{
                  padding: 0,
                  position: 'absolute',
                  right: '2px',
                }}
                aria-label="favorite"
                onClick={favorite.onFlag}
                cursor="pointer"
              >
                <GradeIcon sx={{
                  color: favorite.flagged ? '#FDDA0D' : '#666',
                  fontSize: 24,
                }}/>
              </IconButton>
            </Grid>
          </Grid>
        )}

        <TitleContainer>
          <IconCardStyle
            $iColor={icon?.iconColor || ""}
            $bColor={color}
          >
            <Icons icon={icon?.iconName as IconType} color={icon?.iconColor} scale={icon?.scale as IconScale} width={icon?.iconWidth} height={icon?.iconHeight} />
          </IconCardStyle>
          <p className="title">{title}</p>
        </TitleContainer>

        <p className="description">
          {description}
        </p>
      </Card>
    </ProductCardStyle>
  )
}