import React from 'react';
import { Card as MuiCard } from '@mui/material';
import { CardBaseProps } from '../interfaces';
import { palette } from '../helpers';
import styled from 'styled-components';
import { ColorVariant } from '@/types';

const colorMap: Record<ColorVariant, string> = {
  inherit: palette.inherit,
  primary: palette.primary,
  secondary: palette.secondary,
  error: palette.error,
  warning: palette.warning,
  info: palette.info,
  success: palette.success,
};

const CardStyled = styled(MuiCard)<{ $borderColor?: ColorVariant }>`
  padding: 16px;
  border-radius: 5px;
  box-shadow: 0px 2px 8px #00000053;
  border-left: ${({ $borderColor }) => ($borderColor ? `7px solid ${colorMap[$borderColor]}` : 'none')};
`;

export const Card = ({
  children,
  border,
  color = 'inherit',
  ...props
}: CardBaseProps & { border?: boolean; color?: ColorVariant }) => {
  return (
    <CardStyled $borderColor={border ? color : undefined} {...props}>
      {children}
    </CardStyled>
  );
};