import{j as t,B as n,P as o,Q as _,r as u,q as f,R as g,U as y,X as b,o as i}from"./index-DR3HTfO6.js";import{C as c}from"./CardContent-DogoRcwj.js";function j({icon:e=void 0,value:a,name:s,url:m="",animated:r=!1,LinkComponent:h=_,loading:p=!1}){const x=()=>y.isValidElement(e)?e:t.jsx(n,{component:b,icon:e,alt:typeof s=="string"?s:"",sx:{fontSize:30}}),l=t.jsxs(c,{className:"metric__content",children:[e&&t.jsx(n,{className:"metric__icon",children:x()}),t.jsx(n,{className:"metric__title",children:s}),t.jsx(n,{className:"metric__value",children:u.isValidElement(a)?t.jsx(n,{className:`metric__number ${r?"metric__number--animated":""}`,children:a}):t.jsx(n,{className:`metric__number ${r?"metric__number--animated":""}`,dangerouslySetInnerHTML:{__html:a}})})]});return p?t.jsx(d,{variant:"outlined",children:t.jsxs(c,{className:"metric__content",children:[e&&t.jsx(n,{className:"metric__icon",children:t.jsx(o,{variant:"circular",width:40,height:40})}),t.jsx(o,{className:"metric__title",variant:"rounded",width:120,height:20,sx:{mb:1}}),t.jsx(o,{className:`metric__number ${r?"metric__number--animated":""}`,variant:"rounded",width:100,height:"32px"})]})}):t.jsx(d,{variant:"outlined",children:m?t.jsx(h,{href:m,sx:{textDecoration:"none",color:"inherit"},children:l}):l})}j.propTypes={icon:i.oneOfType([i.string,i.element]),value:i.oneOfType([i.string,i.element]).isRequired,name:i.oneOfType([i.string,i.element]).isRequired,url:i.string,animated:i.bool,LinkComponent:i.elementType,loading:i.bool};const d=f(g)`
  height: 100%;
  transition:
    box-shadow 0.2s ease-in-out,
    transform 0.2s ease-in-out;

  &:hover {
    box-shadow: ${e=>e.theme.shadows[4]};
  }

  .metric__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    height: 100%;

    @media (max-width: ${e=>e.theme.breakpoints.values.sm}px) {
      padding: 16px;
      gap: 8px;
    }
  }

  .metric__icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 4px;
    width: 100%;

    /* Preserve original icon styles, only ensure minimum size */
    > * {
      min-width: 32px;
      min-height: 32px;

      @media (max-width: ${e=>e.theme.breakpoints.values.sm}px) {
        min-width: 24px;
        min-height: 24px;
      }
    }
  }

  .metric__title {
    font-size: 14px;
    font-weight: 500;
    color: ${e=>e.theme.palette.text.secondary};
    text-transform: capitalize;
    line-height: 1.4;
    width: 100%;

    @media (max-width: ${e=>e.theme.breakpoints.values.sm}px) {
      font-size: 12px;
    }
  }

  .metric__value {
    width: 100%;
    margin-top: auto;
  }

  .metric__number {
    font-size: ${e=>e.size==="small"?28:32}px;
    font-weight: 600;
    line-height: 1.2;
    color: ${e=>e.theme.typography.color.main};

    small {
      font-size: 14px;
      line-height: 1.2;
      font-weight: 400;
      color: ${e=>e.theme.palette.text.secondary};
      margin-left: 4px;
    }

    @media (max-width: ${e=>e.theme.breakpoints.values.sm}px) {
      font-size: ${e=>e.size==="small"?20:24}px;

      small {
        font-size: 12px;
      }
    }
  }

  .metric__number--animated {
    animation-name: blink-opacity;
    animation-duration: 250ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    background-color: transparent !important;
  }

  @keyframes blink-opacity {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
    }
  }
`;export{j as M};
