import React from 'react';

import { cn } from '@/admin/lib/utils';

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
	( { className, ...props }, ref ) => (
		<div
			ref={ ref }
			className={ cn(
				'rounded-lg border border-wp-gray-dark bg-white text-wp-text shadow-sm',
				className,
			) }
			{ ...props }
		/>
	),
);
Card.displayName = 'Card';

const CardHeader = React.forwardRef<HTMLDivElement, CardProps>(
	( { className, ...props }, ref ) => (
		<div
			ref={ ref }
			className={ cn( 'flex flex-col space-y-1.5 p-6', className ) }
			{ ...props }
		/>
	),
);
CardHeader.displayName = 'CardHeader';

const CardTitle = React.forwardRef<HTMLHeadingElement, CardProps>(
	( { className, ...props }, ref ) => (
		<h3
			ref={ ref }
			className={ cn(
				'text-2xl font-semibold leading-none tracking-tight text-wp-text',
				className,
			) }
			{ ...props }
		/>
	),
);
CardTitle.displayName = 'CardTitle';

const CardDescription = React.forwardRef<HTMLParagraphElement, CardProps>(
	( { className, ...props }, ref ) => (
		<p
			ref={ ref }
			className={ cn( 'text-sm text-wp-text-secondary', className ) }
			{ ...props }
		/>
	),
);
CardDescription.displayName = 'CardDescription';

const CardContent = React.forwardRef<HTMLDivElement, CardProps>(
	( { className, ...props }, ref ) => (
		<div ref={ ref } className={ cn( 'p-6 pt-0', className ) } { ...props } />
	),
);
CardContent.displayName = 'CardContent';

const CardFooter = React.forwardRef<HTMLDivElement, CardProps>(
	( { className, ...props }, ref ) => (
		<div
			ref={ ref }
			className={ cn( 'flex items-center p-6 pt-0', className ) }
			{ ...props }
		/>
	),
);
CardFooter.displayName = 'CardFooter';

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