import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardDescription, 
  CardContent, 
  CardFooter 
} from '@/nexit-ui/components/ui/card'

export function BasicCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>카드 제목</CardTitle>
        <CardDescription>카드 설명이 여기에 들어갑니다</CardDescription>
      </CardHeader>
      <CardContent>
        <p>카드 콘텐츠가 여기에 들어갑니다.</p>
      </CardContent>
      <CardFooter>
        <Button>액션</Button>
      </CardFooter>
    </Card>
  )
}

<Card variant="default">
  <CardContent>기본 스타일</CardContent>
</Card>
<Card variant="elevated">
  <CardContent>그림자로 들어올린 스타일</CardContent>
</Card>
<Card variant="outlined">
  <CardContent>강조된 테두리 스타일</CardContent>
</Card>
<Card variant="flat">
  <CardContent>플랫한 배경 스타일</CardContent>
</Card>
<Card variant="gradient">
  <CardContent>그라디언트 배경 스타일</CardContent>
</Card>
<Card variant="glass">
  <CardContent>글래스모피즘 스타일</CardContent>
</Card>

<Card hover="lift" isHoverable>
  <CardContent>호버 시 위로 올라가는 효과</CardContent>
</Card>
<Card hover="scale" isHoverable>
  <CardContent>호버 시 크기가 커지는 효과</CardContent>
</Card>
<Card hover="glow" isHoverable>
  <CardContent>호버 시 빛나는 효과</CardContent>
</Card>
<Card hover="border" isHoverable>
  <CardContent>호버 시 테두리 변화 효과</CardContent>
</Card>

export function ProductCard() {
  return (
    <Card variant="elevated" hover="lift" isHoverable className="max-w-sm">
      <CardHeader>
        <img 
          src="/product.jpg" 
          alt="Product" 
          className="w-full h-48 object-cover rounded-lg"
        />
      </CardHeader>
      <CardContent className="space-y-3">
        <CardTitle>멋진 제품</CardTitle>
        <CardDescription>당신의 삶을 바꿀 놀라운 제품입니다.</CardDescription>
        <div className="flex items-center justify-between">
          <span className="text-2xl font-bold">₩99,000</span>
          <span className="text-sm text-muted-foreground line-through">
            ₩129,000
          </span>
        </div>
      </CardContent>
      <CardFooter>
        <Button variant="primary" size="lg" className="w-full h-11 font-semibold">
          🛒 장바구니에 추가
        </Button>
      </CardFooter>
    </Card>
  )
}

export function DashboardCard() {
  return (
    <Card variant="glass">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>분석 데이터</CardTitle>
          <TrendingUpIcon className="h-5 w-5 text-green-500" />
        </div>
        <CardDescription>월간 성과</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="text-3xl font-bold">₩12,345,000</div>
        <p className="text-sm text-green-500">지난달 대비 +12.5%</p>
      </CardContent>
    </Card>
  )
}

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/nexit-ui/components/ui/card"
import { Button } from "@/nexit-ui/components/ui/button"
import { Switch } from "@/nexit-ui/components/ui/switch"

export function SettingsCard() {
  return (
    <Card variant="flat">
      <CardHeader>
        <CardTitle>알림 설정</CardTitle>
        <CardDescription>알림 기본 설정을 관리하세요</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center justify-between py-2">
          <div className="flex flex-col">
            <label className="font-medium text-sm">이메일 알림</label>
            <span className="text-xs text-muted-foreground">
              새로운 업데이트를 이메일로 받아보세요
            </span>
          </div>
          <Switch id="email-notification" />
        </div>
        <div className="flex items-center justify-between py-2">
          <div className="flex flex-col">
            <label className="font-medium text-sm">푸시 알림</label>
            <span className="text-xs text-muted-foreground">
              브라우저 푸시 알림을 받아보세요
            </span>
          </div>
          <Switch id="push-notification" />
        </div>
        <div className="flex items-center justify-between py-2">
          <div className="flex flex-col">
            <label className="font-medium text-sm">SMS 알림</label>
            <span className="text-xs text-muted-foreground">
              중요한 알림을 문자로 받아보세요
            </span>
          </div>
          <Switch id="sms-notification" />
        </div>
      </CardContent>
      <CardFooter className="gap-3 pt-6">
        <Button variant="outline" size="sm" className="flex-1 h-9 font-medium">
          취소
        </Button>
        <Button variant="primary" size="sm" className="flex-1 h-9 font-medium">
          변경사항 저장
        </Button>
      </CardFooter>
    </Card>
  )
}