"use client";

import React from "react";
import { useResponsive } from "@/lib/hooks/useResponsive";

interface ResponsiveContainerProps {
  children: React.ReactNode;
  className?: string;
  mobileClassName?: string;
  tabletClassName?: string;
  desktopClassName?: string;
  breakpoint?: "sm" | "md" | "lg" | "xl" | "2xl";
}

export const ResponsiveContainer: React.FC<ResponsiveContainerProps> = ({
  children,
  className = "",
  mobileClassName = "",
  tabletClassName = "",
  desktopClassName = "",
  breakpoint = "md",
}) => {
  const { isMobile, isTablet, isDesktop } = useResponsive();

  const getResponsiveClassName = () => {
    let responsiveClass = className;

    if (isMobile) {
      responsiveClass += ` ${mobileClassName}`;
    } else if (isTablet) {
      responsiveClass += ` ${tabletClassName}`;
    } else if (isDesktop) {
      responsiveClass += ` ${desktopClassName}`;
    }

    return responsiveClass.trim();
  };

  return (
    <div className={getResponsiveClassName()}>
      {children}
    </div>
  );
};

interface ResponsiveGridProps {
  children: React.ReactNode;
  cols?: {
    mobile?: number;
    tablet?: number;
    desktop?: number;
  };
  gap?: string;
  className?: string;
}

export const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
  children,
  cols = { mobile: 1, tablet: 2, desktop: 3 },
  gap = "4",
  className = "",
}) => {
  const { isMobile, isTablet, isDesktop } = useResponsive();

  const getGridCols = () => {
    if (isMobile) return `grid-cols-${cols.mobile || 1}`;
    if (isTablet) return `grid-cols-${cols.tablet || 2}`;
    if (isDesktop) return `grid-cols-${cols.desktop || 3}`;
    return "grid-cols-1";
  };

  return (
    <div className={`grid ${getGridCols()} gap-${gap} ${className}`}>
      {children}
    </div>
  );
};

interface ResponsiveTextProps {
  children: React.ReactNode;
  size?: {
    mobile?: string;
    tablet?: string;
    desktop?: string;
  };
  className?: string;
}

export const ResponsiveText: React.FC<ResponsiveTextProps> = ({
  children,
  size = { mobile: "text-sm", tablet: "text-base", desktop: "text-lg" },
  className = "",
}) => {
  const { isMobile, isTablet, isDesktop } = useResponsive();

  const getTextSize = () => {
    if (isMobile) return size.mobile || "text-sm";
    if (isTablet) return size.tablet || "text-base";
    if (isDesktop) return size.desktop || "text-lg";
    return "text-base";
  };

  return (
    <div className={`${getTextSize()} ${className}`}>
      {children}
    </div>
  );
};