import React from 'react';
import { useNavigate } from 'react-router-dom';
import { BlockButton } from '../../types/blocks';
import styles from './SquareButton.module.css';

interface SquareButtonProps extends BlockButton {
  size?: number;
  onClick?: () => void;
  disabled?: boolean;
}

const SquareButton: React.FC<SquareButtonProps> = ({
  background,
  title,
  subtitle,
  icon,
  imageUrl,
  color,
  action,
  size = 100,
  onClick,
  disabled
}) => {
  const navigate = useNavigate();

  const handleClick = () => {
    if (onClick) {
      onClick();
    } else if (action) {
      if (action.type === 'route') {
        navigate(action.value);
      } else if (action.type === 'function') {
        // В будущем здесь будет обработка функций
        console.log('Function action:', action.value);
      }
    }
  };

  const getBackground = () => {
    switch (background.type) {
      case 'image':
        return {
          backgroundImage: `url(${background.url})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          ...(background.overlay && {
            '&::after': {
              content: '""',
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: background.overlay
            }
          })
        };
      case 'gradient':
        return {
          background: background.colors?.length 
            ? `linear-gradient(135deg, ${background.colors.join(', ')})`
            : undefined
        };
      case 'color':
        return {
          backgroundColor: background.colors?.[0]
        };
      default:
        return {};
    }
  };

  return (
    <div className={styles.buttonWrapper}>
      <button
        className={styles.button}
        onClick={handleClick}
        style={{
          width: size,
          height: size,
          ...getBackground(),
          color: color || '#FFFFFF'
        }}
        disabled={disabled}
      >
        {imageUrl ? (
          <img src={imageUrl} alt={title} className={styles.iconImage} />
        ) : icon ? (
          <span className={styles.icon}>{icon}</span>
        ) : null}
        <div className={styles.content}>
          <span className={styles.title}>{title}</span>
          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
        </div>
      </button>
    </div>
  );
};

export default SquareButton;
