commerce/components/ui/card.tsx

import React from 'react';
import { Slot } from '@radix-ui/react-slot';

import { VariantProps, tv } from 'tailwind-variants';

const cardStyles = tv({
  base: 'rounded p-6 text-left w-full',
  variants: {
    outlined: {
      true: 'border bg-white',
      false: {}
    },
    elevated: {
      true: 'shadow-lg shadow-content/10 bg-white',
      false: {}
    }
  },
  defaultVariants: {
    outlined: true
  }
});

interface CardProps extends React.ComponentPropsWithoutRef<'div'>, VariantProps<typeof cardStyles> {
  asChild?: boolean;
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, asChild, outlined, elevated, ...props }, forwardedRef) => {
    const Component = asChild ? Slot : 'div';
    return (
      <Component ref={forwardedRef} className={cardStyles({ outlined, className })} {...props} />
    );
  }
);

Card.displayName = 'Card';

export { Card, type CardProps };