import type { CSSProperties, ComponentPropsWithRef } from 'react';
import { cn } from 'helpers/cn';

export const cardStyle = (overrides?: CSSProperties): CSSProperties => ({
  backgroundColor: 'var(--card-bg)',
  backgroundImage: `
    linear-gradient(to right, var(--card-grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--card-grid-color) 1px, transparent 1px)
  `,
  backgroundSize: '20px 20px',
  ...overrides,
});

type CardProps = ComponentPropsWithRef<'div'>;

export const Card = ({ className, style, ...props }: CardProps) => {
  return (
    <div
      className={cn('rounded-xl border-2 border-duck-dark/30 shadow-lg p-5', className)}
      style={cardStyle(style)}
      {...props}
    />
  );
};