import "hono/jsx"
import type { FC, PropsWithChildren, JSX } from "hono/jsx"
import { CodeExamples } from "./code"
import { cn } from "./cn"

type BoxProps = JSX.IntrinsicElements["div"] & PropsWithChildren & {
  bg?: string
  color?: string
  p?: number
}

export const Box: FC<BoxProps> = (props) => {
  const { children, bg, color, p, class: className, style, id, ref, ...rest } = props

  const boxStyle: JSX.CSSProperties = {
    backgroundColor: bg,
    color: color,
    padding: p ? `${p}px` : undefined,
    ...(style as JSX.CSSProperties),
  }

  return <div class={cn("Box", className)} style={boxStyle} id={id} ref={ref} {...rest}>{children}</div>
}

// Common demo box colors
export const RedBox: FC<PropsWithChildren> = ({ children }) => (
  <Box bg="#ef4444" p={4} style={{ textAlign: "center" }}>
    {children}
  </Box>
)

export const GreenBox: FC<PropsWithChildren> = ({ children }) => (
  <Box bg="#22c55e" p={4} style={{ textAlign: "center" }}>
    {children}
  </Box>
)

export const BlueBox: FC<PropsWithChildren> = ({ children }) => (
  <Box bg="#3b82f6" p={4} style={{ textAlign: "center" }}>
    {children}
  </Box>
)

export const GrayBox: FC<PropsWithChildren & { style?: JSX.CSSProperties }> = ({ children, style }) => (
  <Box bg="#f3f4f6" p={16} style={style}>
    {children}
  </Box>
)

export const Test = () => {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "32px", padding: "24px" }}>
      {/* API Usage Examples */}
      <CodeExamples
        examples={[
          '<Box>Content</Box>',
          '<Box bg="#3b82f6" p={16}>Content</Box>',
          '<RedBox>Content</RedBox>',
          '<GrayBox>Content</GrayBox>',
        ]}
      />

      <div>
        <h2 style={{ fontSize: "20px", fontWeight: "bold", marginBottom: "16px" }}>Box Component</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
          <Box bg="#3b82f6" color="#ffffff" p={16}>
            Basic Box with custom background and text color
          </Box>
          <Box p={8} style={{ border: "2px solid #d1d5db", borderRadius: "8px" }}>
            Box with padding and border
          </Box>
        </div>
      </div>

      <div>
        <h2 style={{ fontSize: "20px", fontWeight: "bold", marginBottom: "16px" }}>Color Variants</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
          <RedBox>Red Box</RedBox>
          <GreenBox>Green Box</GreenBox>
          <BlueBox>Blue Box</BlueBox>
          <GrayBox>Gray Box</GrayBox>
        </div>
      </div>

      <div>
        <h2 style={{ fontSize: "20px", fontWeight: "bold", marginBottom: "16px" }}>Nested Boxes</h2>
        <Box bg="#f3f4f6" p={16}>
          <Box bg="#e5e7eb" p={12}>
            <Box bg="#d1d5db" p={8}>
              Nested boxes demonstration
            </Box>
          </Box>
        </Box>
      </div>
    </div>
  )
}