import { Link } from "react-router-dom";
import "./Card.css";

export function Card({ children, interactive = false, padded = true, className = "", to, ...props }) {
    const Component = to ? Link : "div";
    return (
        <Component
            to={to}
            className={`dw-card ${interactive || to ? "dw-card--interactive" : ""} ${
                padded ? "dw-card--padded" : ""
            } ${className}`}
            {...props}
        >
            {children}
        </Component>
    );
}

export function CardHeader({ title, subtitle, action, className = "" }) {
    return (
        <div className={`dw-card__header ${className}`}>
            <div className="dw-card__header-text">
                {title && <h3 className="dw-card__title">{title}</h3>}
                {subtitle && <p className="dw-card__subtitle">{subtitle}</p>}
            </div>
            {action && <div className="dw-card__header-action">{action}</div>}
        </div>
    );
}

export function CardBody({ children, className = "" }) {
    return <div className={`dw-card__body ${className}`}>{children}</div>;
}