import { define } from '../src'
import { Layout, ExampleSection } from './helpers'

const Button = define('Button', {
  base: 'button',

  padding: "12px 24px",
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  gap: 8,
  background: "#3b82f6",
  color: "white",
  border: "none",
  borderRadius: 8,
  fontSize: 16,
  fontWeight: 600,
  cursor: "pointer",
  transition: "all 0.2s ease",
  userSelect: "none",
  boxShadow: "0 4px 6px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1)",
  transform: "translateY(0)",

  states: {
    ":not(:disabled):hover": {
      transform: 'translateY(-2px) !important',
      filter: 'brightness(1.05)'
    },
    ":not(:disabled):active": {
      transform: 'translateY(1px) !important',
      boxShadow: '0 2px 3px rgba(0, 0, 0, 0.2) !important'
    },
  },

  variants: {
    intent: {
      primary: {
        background: "#3b82f6",
        color: "white",
        boxShadow: "0 4px 6px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1)",
      },
      secondary: {
        background: "#f3f4f6",
        color: "#374151",
        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)",
      },
      danger: {
        background: "#ef4444",
        color: "white",
        boxShadow: "0 4px 6px rgba(239, 68, 68, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1)",
      },
      ghost: {
        background: "transparent",
        color: "#aaa",
        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1)",
        border: "1px solid #eee",
      },
    },
    size: {
      small: {
        padding: "8px 16px",
        fontSize: 14,
      },
      large: {
        padding: "16px 32px",
        fontSize: 18,
      },
    },
    disabled: {
      opacity: 0.5,
      cursor: "not-allowed",
    },
  },
})

const ButtonRow = define('ButtonRow', {
  display: 'flex',
  gap: 16,
  flexWrap: 'wrap',
  alignItems: 'center',
})

export const ButtonExamplesPage = () => (
  <Layout title="Forge Button Component Examples">
    <ExampleSection title="Intents">
      <ButtonRow>
        <Button intent="primary">Primary</Button>
        <Button intent="secondary">Secondary</Button>
        <Button intent="danger">Danger</Button>
        <Button intent="ghost">Ghost</Button>
      </ButtonRow>
    </ExampleSection >

    <ExampleSection title="Sizes">
      <ButtonRow>
        <Button size="small">Small Button</Button>
        <Button>Medium Button</Button>
        <Button size="large">Large Button</Button>
      </ButtonRow>
    </ExampleSection>

    <ExampleSection title="Sizes">
      <ButtonRow>
        <Button intent="primary" size="small">Small Primary</Button>
        <Button intent="secondary" size="small">Small Secondary</Button>
        <Button intent="danger" size="large">Large Danger</Button>
        <Button intent="ghost" size="large">Large Ghost</Button>
      </ButtonRow>
    </ExampleSection>

    <ExampleSection title="Disabled">
      <ButtonRow>
        <Button disabled>Default Disabled</Button>
        <Button intent="primary" disabled>Primary Disabled</Button>
        <Button intent="secondary" disabled>Secondary Disabled</Button>
        <Button intent="danger" disabled>Danger Disabled</Button>
        <Button intent="ghost" disabled>Ghost Disabled</Button>
      </ButtonRow>
    </ExampleSection>
  </Layout >
)