import React from "react";

export function Card({ className = "", children, ...props }) {
  return <div className={["o-card", className].filter(Boolean).join(" ")} data-slot="card" {...props}>{children}</div>;
}
export function CardHeader({ className = "", children, ...props }) {
  return <div className={["o-card__header", className].filter(Boolean).join(" ")} data-slot="card-header" {...props}>{children}</div>;
}
export function CardTitle({ className = "", children, ...props }) {
  return <div className={["o-card__title", className].filter(Boolean).join(" ")} data-slot="card-title" {...props}>{children}</div>;
}
export function CardDescription({ className = "", children, ...props }) {
  return <div className={["o-card__description", className].filter(Boolean).join(" ")} data-slot="card-description" {...props}>{children}</div>;
}
export function CardAction({ className = "", children, ...props }) {
  return <div className={["o-card__action", className].filter(Boolean).join(" ")} data-slot="card-action" {...props}>{children}</div>;
}
export function CardPanel({ className = "", children, ...props }) {
  return <div className={["o-card__panel", className].filter(Boolean).join(" ")} data-slot="card-panel" {...props}>{children}</div>;
}
export function CardFooter({ className = "", children, ...props }) {
  return <div className={["o-card__footer", className].filter(Boolean).join(" ")} data-slot="card-footer" {...props}>{children}</div>;
}
export function CardFrame({ className = "", children, ...props }) {
  return <div className={["o-cardframe", className].filter(Boolean).join(" ")} data-slot="card-frame" {...props}>{children}</div>;
}
export function CardFrameHeader({ className = "", children, ...props }) {
  return <div className={["o-cardframe__header", className].filter(Boolean).join(" ")} data-slot="card-frame-header" {...props}>{children}</div>;
}
export function CardFrameTitle({ className = "", children, ...props }) {
  return <div className={["o-cardframe__title", className].filter(Boolean).join(" ")} data-slot="card-frame-title" {...props}>{children}</div>;
}
export function CardFrameDescription({ className = "", children, ...props }) {
  return <div className={["o-cardframe__description", className].filter(Boolean).join(" ")} data-slot="card-frame-description" {...props}>{children}</div>;
}
export function CardFrameFooter({ className = "", children, ...props }) {
  return <div className={["o-cardframe__footer", className].filter(Boolean).join(" ")} data-slot="card-frame-footer" {...props}>{children}</div>;
}
