import { forwardRef, useMemo } from 'react';
import {
  Card as RadixCard,
  type CardProps as RadixCardProps,
} from '@radix-ui/themes';

export type CardProps = RadixCardProps & {
  borderRadius?: 'none';
  borderDisable?: {
    left?: boolean;
    right?: boolean;
    top?: boolean;
    bottom?: boolean;
  };
  error?: boolean;
};

export const Card = forwardRef<HTMLDivElement, CardProps>(
  (props, forwardedRef) => {
    const { borderDisable, borderRadius, error, ...rest } = props;

    const borderInsetClassName = useMemo(() => {
      if (!borderDisable) return '';
      const { left, right, top, bottom } = borderDisable;
      return [
        left && 'disable-inset-left',
        right && 'disable-inset-right',
        top && 'disable-inset-top',
        bottom && 'disable-inset-bottom',
      ]
        .filter(Boolean)
        .join(' ');
    }, [borderDisable]);

    const errorClsName = useMemo(() => {
      return error ? ' error' : '';
    }, [error]);

    return (
      <RadixCard
        variant="surface"
        {...rest}
        className={`${borderInsetClassName}${errorClsName} ${rest.className || ''}`}
        data-radius={borderRadius}
        ref={forwardedRef}
      />
    );
  }
);

Card.displayName = 'Card';
