export const CardSkeleton = ({
  className = '',
  width,
  height,
  style = {},
  ...props
}) => {
  const containerStyle = {
    borderRadius: '14px',
    border: '1px solid #C4C4C4',
    opacity: 1,
    display: 'flex',
    flexDirection: 'column',
    overflow: 'hidden',
    boxSizing: 'border-box',
    ...(width != null && { width: typeof width === 'number' ? `${width}px` : width }),
    ...(height != null && { height: typeof height === 'number' ? `${height}px` : height }),
    ...(height == null && { minHeight: '476px' }),
    ...style,
  };

  return (
    <div
      className={`bg-white w-full ${className}`}
      style={containerStyle}
      {...props}
    >
      <style>{`
        @keyframes anima-card-skeleton-pulse {
          0%, 100% {
            background-color: #DDDDDD;
          }
          50% {
            background-color: #AAAAAA;
          }
        }
        .anima-card-skeleton-animation {
          animation: anima-card-skeleton-pulse 1.5s ease-in-out infinite;
        }
      `}</style>
      <div
        style={{
          height: '100%',
          minHeight: 0,
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        {/* Header skeleton - placeholder para el título */}
        <div
          style={{
            paddingTop: '24px',
            paddingRight: '24px',
            paddingBottom: '6px',
            paddingLeft: '24px',
            opacity: 1,
            flexShrink: 0
          }}
        >
          <div
            className="anima-card-skeleton-animation"
            style={{
              backgroundColor: '#DDDDDD',
              height: '20px',
              width: '200px',
              maxWidth: '100%',
              boxSizing: 'border-box',
              borderRadius: 4,
            }}
          ></div>
        </div>
        {/* Body skeleton - 3 placeholders grandes */}
        <div
          style={{
            flex: 1,
            paddingLeft: '24px',
            paddingRight: '24px',
            paddingBottom: '24px',
            display: 'flex',
            flexDirection: 'column',
            gap: '16px',
            minHeight: 0,
            overflow: 'hidden'
          }}
        >
          <div
            className="anima-card-skeleton-animation"
            style={{
              backgroundColor: '#DDDDDD',
              height: '80px',
              width: '100%',
              maxWidth: '100%',
              boxSizing: 'border-box',
              borderRadius: 4,
            }}
          ></div>
          <div
            className="anima-card-skeleton-animation"
            style={{
              backgroundColor: '#DDDDDD',
              height: '80px',
              width: '100%',
              maxWidth: '100%',
              boxSizing: 'border-box',
              borderRadius: 4,
            }}
          ></div>
          <div
            className="anima-card-skeleton-animation"
            style={{
              backgroundColor: '#DDDDDD',
              height: '80px',
              width: '100%',
              maxWidth: '100%',
              boxSizing: 'border-box',
              borderRadius: 4,
            }}
          ></div>
        </div>
      </div>
    </div>
  );
};

export default CardSkeleton;

