import { useState } from 'react'
import { Collapsible, CollapsibleGroup } from '@astryxdesign/core/Collapsible'
import { Grid } from '@astryxdesign/core/Grid'
import { Heading } from '@astryxdesign/core/Heading'
import { SelectableCard } from '@astryxdesign/core/SelectableCard'
import { Text } from '@astryxdesign/core/Text'
import { VStack } from '@astryxdesign/core/VStack'

const PLANS = [
  { id: 'basic', name: '基础版', price: '¥9/月', desc: '适合个人项目' },
  { id: 'pro', name: '专业版', price: '¥29/月', desc: '适合小型团队' },
  { id: 'team', name: '团队版', price: '¥99/月', desc: '适合协作组织' },
]

export function LayoutDemo() {
  const [selected, setSelected] = useState('pro')

  return (
    <VStack gap={4}>
      <Grid columns={{ minWidth: 140, max: 3 }} gap={3}>
        {PLANS.map((plan) => (
          <SelectableCard
            key={plan.id}
            label={plan.name}
            isSelected={selected === plan.id}
            onChange={() => setSelected(plan.id)}>
            <VStack gap={1}>
              <Heading level={4}>{plan.name}</Heading>
              <Text type="large" weight="bold">
                {plan.price}
              </Text>
              <Text type="supporting" size="sm">
                {plan.desc}
              </Text>
            </VStack>
          </SelectableCard>
        ))}
      </Grid>

      <CollapsibleGroup type="single" defaultValue="layout">
        <Collapsible
          value="layout"
          trigger={<Text type="label">这个布局是如何组织的？</Text>}>
          <Text type="body" color="secondary" as="p">
            外层使用 Grid 负责响应式列数，SelectableCard 负责可选中的卡片语义，Collapsible
            负责按需展开说明。所有间距都来自同一套 token。
          </Text>
        </Collapsible>
      </CollapsibleGroup>
    </VStack>
  )
}