import React from 'react';
import styled, { css } from 'styled-components';

interface ICTAButtonProps {
  icon: React.ReactNode;
  label?: React.ReactNode;
  onClick?: (e: React.MouseEvent) => void;
  className?: string;
  fullWidth?: boolean;
  textColor?: string;
  iconColor?: string;
  disabled?: boolean;
}

export const CTAButton: React.FC<ICTAButtonProps> = ({
  icon,
  label,
  onClick,
  className,
  fullWidth = false,
  textColor = '#ffffff',
  iconColor = '#f59e0b',
  disabled = false,
}) => {
  return (
    <ButtonContainer
      className={className}
      onPointerDown={disabled ? undefined : onClick}
      $fullWidth={fullWidth}
      $disabled={disabled}
      $color={textColor}
    >
      <ButtonContent>
        <IconWrapper $color={iconColor} $disabled={disabled}>
          {icon}
        </IconWrapper>
        {label && (
          <ButtonLabel $color={textColor} $disabled={disabled}>
            {label}
          </ButtonLabel>
        )}
      </ButtonContent>
    </ButtonContainer>
  );
};

const ButtonContainer = styled.div<{
  $fullWidth: boolean;
  $disabled: boolean;
  $color: string;
}>`
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
  border-radius: 4px;
  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
  transition: all 0.2s;
  position: relative;
  opacity: ${props => (props.$disabled ? 0.5 : 1)};
  // set color for disabled and active
  color: ${props => (props.$disabled ? '#6b7280' : props.$color)};

  ${props =>
    props.$fullWidth &&
    css`
      display: flex;
      justify-content: center;
    `}

  &:hover {
    background: ${props =>
      props.$disabled ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.4)'};
    box-shadow: ${props =>
      props.$disabled
        ? '0 0 10px rgba(245, 158, 11, 0.3)'
        : '0 0 15px rgba(245, 158, 11, 0.4)'};
    transform: ${props => (props.$disabled ? 'none' : 'translateY(-1px)')};
  }

  &:active {
    transform: ${props => (props.$disabled ? 'none' : 'translateY(1px)')};
    box-shadow: ${props =>
      props.$disabled
        ? '0 0 10px rgba(245, 158, 11, 0.3)'
        : '0 0 5px rgba(245, 158, 11, 0.2)'};
  }

  &:before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 5px;
    padding: 1px;
    background: linear-gradient(45deg, #f59e0b, #fbbf24, #f59e0b);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
  }
`;

const ButtonContent = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
`;

const IconWrapper = styled.div<{ $color: string; $disabled: boolean }>`
  svg {
    font-size: 1.25rem;
    color: ${props => props.$color};
    filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.5));
    opacity: ${props => (props.$disabled ? 0.5 : 1)};
  }
`;

const ButtonLabel = styled.span<{ $color: string; $disabled: boolean }>`
  color: ${props => props.$color};
  font-family: 'Press Start 2P', cursive;
  font-size: 0.875rem;
  text-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
  opacity: ${props => (props.$disabled ? 0.5 : 1)};
`;
