"use client";

import React from "react";
import { useTheme } from "@/lib/contexts/ThemeContext";

interface ThemedButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: "primary" | "secondary" | "outline";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  className?: string;
}

export const ThemedButton: React.FC<ThemedButtonProps> = ({
  children,
  onClick,
  variant = "primary",
  size = "md",
  disabled = false,
  className = "",
}) => {
  const { colors } = useTheme();

  const sizeClasses = {
    sm: "px-3 py-1.5 text-sm",
    md: "px-4 py-2 text-base",
    lg: "px-6 py-3 text-lg",
  };

  const variantStyles = {
    primary: {
      backgroundColor: colors.primary,
      color: "white",
      border: `1px solid ${colors.primary}`,
      hover: {
        backgroundColor: colors.secondary,
        borderColor: colors.secondary,
      },
    },
    secondary: {
      backgroundColor: colors.surface,
      color: colors.text,
      border: `1px solid ${colors.border}`,
      hover: {
        backgroundColor: colors.hover,
        borderColor: colors.primary,
      },
    },
    outline: {
      backgroundColor: "transparent",
      color: colors.primary,
      border: `1px solid ${colors.primary}`,
      hover: {
        backgroundColor: colors.primary,
        color: "white",
      },
    },
  };

  const style = variantStyles[variant];

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`
        ${sizeClasses[size]}
        rounded-lg font-medium transition-all duration-200
        disabled:opacity-50 disabled:cursor-not-allowed
        ${className}
      `}
      style={{
        backgroundColor: style.backgroundColor,
        color: style.color,
        border: style.border,
      }}
      onMouseEnter={(e) => {
        if (!disabled) {
          e.currentTarget.style.backgroundColor = style.hover.backgroundColor;
          e.currentTarget.style.borderColor = style.hover.borderColor;
          e.currentTarget.style.color = style.hover.color;
        }
      }}
      onMouseLeave={(e) => {
        if (!disabled) {
          e.currentTarget.style.backgroundColor = style.backgroundColor;
          e.currentTarget.style.borderColor = style.border;
          e.currentTarget.style.color = style.color;
        }
      }}
    >
      {children}
    </button>
  );
};