import React from "react";

export function Frame({ className = "", children, ...props }) {
  return <div className={["o-frame", className].filter(Boolean).join(" ")} data-slot="frame" {...props}>{children}</div>;
}
export function FramePanel({ className = "", children, ...props }) {
  return <div className={["o-frame__panel", className].filter(Boolean).join(" ")} data-slot="frame-panel" {...props}>{children}</div>;
}
export function FrameHeader({ className = "", children, ...props }) {
  return <header className={["o-frame__header", className].filter(Boolean).join(" ")} data-slot="frame-panel-header" {...props}>{children}</header>;
}
export function FrameTitle({ className = "", children, ...props }) {
  return <div className={["o-frame__title", className].filter(Boolean).join(" ")} data-slot="frame-panel-title" {...props}>{children}</div>;
}
export function FrameDescription({ className = "", children, ...props }) {
  return <div className={["o-frame__description", className].filter(Boolean).join(" ")} data-slot="frame-panel-description" {...props}>{children}</div>;
}
export function FrameFooter({ className = "", children, ...props }) {
  return <footer className={["o-frame__footer", className].filter(Boolean).join(" ")} data-slot="frame-panel-footer" {...props}>{children}</footer>;
}
