import { Slot } from '@radix-ui/react-slot';
import { type VariantProps, cva } from 'class-variance-authority';
import * as React from 'react';
import { cn } from '../..';
import styles from './BaseCard.module.css';

const baseCardVariants = cva(styles.BaseCard, {
  variants: {
    variant: {
      default: styles.default,
    },
    size: {
      default: styles['size-default'],
    },
  },
  defaultVariants: {
    variant: 'default',
    size: 'default',
  },
});

export interface BaseCardProps
  extends React.HtmlHTMLAttributes<HTMLDivElement>,
    VariantProps<typeof baseCardVariants> {
  asChild?: boolean;
}

const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'div';
    return (
      <Comp
        className={cn(
          styles.BaseCard,
          baseCardVariants({ variant, size, className }),
        )}
        ref={ref}
        {...props}
      />
    );
  },
);

BaseCard.displayName = 'BaseCard';

const BaseCardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn(styles.CardHeader, className)} {...props} />
));
BaseCardHeader.displayName = 'CardHeader';

const BaseCardTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3 ref={ref} className={cn(styles.CardTitle, className)} {...props} />
));
BaseCardTitle.displayName = 'CardTitle';

const BaseCardDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p ref={ref} className={cn(styles.CardDescription, className)} {...props} />
));
BaseCardDescription.displayName = 'CardDescription';

const BaseCardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn(styles.CardContent, className)} {...props} />
));
BaseCardContent.displayName = 'CardContent';

const BaseCardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn(styles.CardFooter, className)} {...props} />
));
BaseCardFooter.displayName = 'CardFooter';

export {
  BaseCard,
  baseCardVariants,
  BaseCardHeader,
  BaseCardFooter,
  BaseCardTitle,
  BaseCardDescription,
  BaseCardContent,
};
