kcg-ai-monitoring/frontend/src/design-system/sections/CardSection.tsx

import { TrkSectionHeader, Trk } from '../lib/Trk';
import { Card, CardHeader, CardTitle, CardContent } from '@shared/components/ui/card';
import { Database, Activity, Bell } from 'lucide-react';

export function CardSectionShowcase() {
  return (
    <>
      <TrkSectionHeader
        id="TRK-SEC-card"
        title="Card · Section"
        description="4 variant (default/elevated/inner/transparent). CardHeader+CardTitle+CardContent 조합."
      />

      {/* 4 variant */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-2">Variant</h3>
      <div className="ds-grid ds-grid-2">
        <Trk id="TRK-CARD-default" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-2 block">variant=default</label>
          <Card variant="default">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-1.5">
                <Database className="w-3.5 h-3.5 text-blue-400" />
                데이터베이스
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-1.5">
              <div className="flex justify-between text-[11px]">
                <span className="text-hint">PostgreSQL</span>
                <span className="text-label">v15.4 운영중</span>
              </div>
              <div className="flex justify-between text-[11px]">
                <span className="text-hint">연결</span>
                <span className="text-label">8 / 20</span>
              </div>
            </CardContent>
          </Card>
        </Trk>

        <Trk id="TRK-CARD-elevated" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-2 block">variant=elevated (기본값)</label>
          <Card variant="elevated">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-1.5">
                <Activity className="w-3.5 h-3.5 text-green-400" />
                시스템 상태
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-1.5">
              <div className="flex justify-between text-[11px]">
                <span className="text-hint">API</span>
                <span className="text-green-400">정상</span>
              </div>
              <div className="flex justify-between text-[11px]">
                <span className="text-hint">Prediction</span>
                <span className="text-green-400">5분 주기</span>
              </div>
            </CardContent>
          </Card>
        </Trk>

        <Trk id="TRK-CARD-inner" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-2 block">variant=inner</label>
          <Card variant="inner">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-1.5">
                <Bell className="w-3.5 h-3.5 text-yellow-400" />
                알림
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-[11px] text-label">중첩 카드 내부에 사용. 외부 카드보다 한 단계 낮은 depth.</p>
            </CardContent>
          </Card>
        </Trk>

        <Trk id="TRK-CARD-transparent" className="ds-sample">
          <label className="text-[10px] text-hint font-mono mb-2 block">variant=transparent</label>
          <Card variant="transparent">
            <CardHeader className="pb-2">
              <CardTitle>투명 카드</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-[11px] text-label">배경/보더 없이 구조만 활용 (그룹핑 목적).</p>
            </CardContent>
          </Card>
        </Trk>
      </div>

      {/* 사용 예시 */}
      <h3 className="text-sm font-semibold text-heading mb-2 mt-6">사용 예시</h3>
      <Trk id="TRK-CARD-usage-code" className="ds-sample">
        <code className="ds-code">
          {`import { Card, CardHeader, CardTitle, CardContent } from '@shared/components/ui/card';
import { Database } from 'lucide-react';

<Card variant="elevated">
  <CardHeader className="pb-2">
    <CardTitle className="flex items-center gap-1.5">
      <Database className="w-3.5 h-3.5 text-blue-400" />
      데이터베이스
    </CardTitle>
  </CardHeader>
  <CardContent className="space-y-2">
    {/* 콘텐츠 */}
  </CardContent>
</Card>`}
        </code>
      </Trk>
    </>
  );
}