import * as React from 'react';

import {cn} from '../../lib';

function Card({className, ref, ...props}: React.ComponentProps<'div'>) {
  return (
    <div
      ref={ref}
      className={cn('rounded-lg border border-neutral-200 bg-white text-neutral-950 shadow-sm overflow-hidden', className)}
      {...props}
    />
  );
}
Card.displayName = 'Card';

function CardHeader({className, ref, ...props}: React.ComponentProps<'div'>) {
  return <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
}
CardHeader.displayName = 'CardHeader';

function CardTitle({className, ref, ...props}: React.ComponentProps<'div'>) {
  return <div ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />;
}
CardTitle.displayName = 'CardTitle';

function CardDescription({className, ref, ...props}: React.ComponentProps<'div'>) {
  return <div ref={ref} className={cn('text-sm text-neutral-500', className)} {...props} />;
}
CardDescription.displayName = 'CardDescription';

function CardContent({className, ref, ...props}: React.ComponentProps<'div'>) {
  return <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />;
}
CardContent.displayName = 'CardContent';

function CardFooter({className, ref, ...props}: React.ComponentProps<'div'>) {
  return <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />;
}
CardFooter.displayName = 'CardFooter';

export {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};
