import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { StyledTabs } from '../Tabs/Tabs.styles';
import { defaultThemeProp } from '../../theme';
import Flex from '../Flex';
import { StyledPopover } from '../Popover';
import { StyledCard } from './Card';
import { StyledCardContent } from './CardContent';
export const StyledCardHeader = styled.header(({ theme, onClick }) => {
    return css `
    ${StyledPopover} &, &:not(${StyledCard} ${StyledCard} > &) {
      padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);

      &:has(${StyledTabs}:first-child) {
        padding-block-start: 0;
      }

      > ${StyledTabs} {
        min-inline-size: calc(100% + ${theme.components.card.padding} * 4);
        margin-inline-start: calc(${theme.components.card.padding} * -2);
      }

      + ${StyledCardContent} {
        padding-block-start: 0;

        /* Plain selector is used instead of StyledTabPanel due to cyclic dependency. */
        > [role='tabpanel'] {
          padding-block-start: 0;
        }
      }

      &:hover {
        ${onClick ? 'cursor: pointer;' : undefined}
      }
    }
  `;
});
StyledCardHeader.defaultProps = defaultThemeProp;
const CardHeader = forwardRef(function CardHeader({ children, actions, ...restProps }, ref) {
    return (_jsx(Flex, { container: { alignItems: 'center', justify: 'between' }, as: StyledCardHeader, ...restProps, ref: ref, children: actions ? (_jsxs(_Fragment, { children: [_jsx(Flex, { container: { alignItems: 'center' }, item: { grow: 1 }, children: children }), _jsx("div", { children: actions })] })) : (children) }));
});
CardHeader.displayName = 'CardHeader';
export default CardHeader;
//# sourceMappingURL=CardHeader.js.map