import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import Flex from '../Flex';
import { StyledPopover } from '../Popover';
import { useFullscreenContext } from '../Fullscreen';
import { StyledCardMedia } from './CardMedia';
export const StyledCard = styled.article(props => {
    const fullscreen = useFullscreenContext();
    const { 'border-radius': borderRadius, 'border-color': borderColor, background } = props.theme.components.card;
    const interactive = props.interactive
        ? css `
        &:hover {
          border: 0;
          box-shadow: 0 0 0 0.0625rem ${borderColor};
        }
        &:focus {
          border: 0;
          box-shadow: 0 0 0 0.125rem ${borderColor};
        }
      `
        : undefined;
    return css `
    ${StyledPopover} &, &:not(& &) {
      background-color: ${background};
      border-radius: ${borderRadius};

      &:focus {
        outline: none;
      }

      ${interactive}

      ${StyledCardMedia} {
        &:first-child img {
          border-radius: ${borderRadius} ${borderRadius} 0 0;
        }
      }

      ${fullscreen?.[0] &&
        css `
        block-size: 100%;
        border-radius: 0;
      `}
    }
  `;
});
StyledCard.defaultProps = defaultThemeProp;
const Card = forwardRef(function Card({ children, as, onClick, interactive = false, ...restProps }, ref) {
    const interactiveProps = {
        ...(onClick && {
            onClick,
            tabIndex: 0,
            role: 'button'
        }),
        ...(interactive && {
            tabIndex: 0
        }),
        interactive
    };
    return (_jsx(Flex, { role: 'none', container: { direction: 'column' }, as: StyledCard, forwardedAs: as, ref: ref, ...interactiveProps, ...restProps, children: children }));
});
export default Card;
//# sourceMappingURL=Card.js.map