import React from 'react';

import { Card } from '@/components/ui/card';
import { cn } from '@/lib/utils';

export const frostedCardClass = cn(
  'border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/30 backdrop-blur',
  'dark:border-slate-800/70 dark:bg-slate-950/85 dark:text-slate-100'
);

type FrostedCardProps = React.ComponentProps<typeof Card>;

export function FrostedCard({ className, ...props }: FrostedCardProps) {
  return <Card className={cn(frostedCardClass, className)} {...props} />;
}

type FrostedSurfaceProps = React.HTMLAttributes<HTMLDivElement> & {
  asChild?: boolean;
};

export function FrostedSurface({ className, ...props }: FrostedSurfaceProps) {
  return (
    <div
      className={cn(
        'rounded-2xl border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/30 backdrop-blur',
        'dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-100',
        className
      )}
      {...props}
    />
  );
}