"use client"

import { MemberNameWithStatus } from "./member-name-with-status"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"

export function MemberNameWithStatusDemo() {
  return (
    <div className="space-y-6 p-6">
      <Card>
        <CardHeader>
          <CardTitle>成员状态显示方案</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* 方案1: 左上角圆点 */}
          <div>
            <h3 className="text-sm font-semibold mb-3">方案1: 左上角圆点（推荐）</h3>
            <div className="space-y-2">
              <div className="flex items-center gap-4">
                <MemberNameWithStatus name="虞雨欣" isDead={false} dotPosition="top-left" />
                <span className="text-xs text-muted-foreground">在世 - 绿色圆点</span>
              </div>
              <div className="flex items-center gap-4">
                <MemberNameWithStatus name="虞文昌" isDead={true} dotPosition="top-left" />
                <span className="text-xs text-muted-foreground">已故 - 灰色圆点 + 浅色文字</span>
              </div>
            </div>
          </div>

          {/* 方案2: 左侧圆点 */}
          <div>
            <h3 className="text-sm font-semibold mb-3">方案2: 左侧圆点</h3>
            <div className="space-y-2">
              <div className="flex items-center gap-4">
                <MemberNameWithStatus name="虞雨欣" isDead={false} dotPosition="left" />
                <span className="text-xs text-muted-foreground">在世 - 绿色圆点</span>
              </div>
              <div className="flex items-center gap-4">
                <MemberNameWithStatus name="虞文昌" isDead={true} dotPosition="left" />
                <span className="text-xs text-muted-foreground">已故 - 灰色圆点 + 浅色文字</span>
              </div>
            </div>
          </div>

          {/* 方案3: 仅文字颜色 */}
          <div>
            <h3 className="text-sm font-semibold mb-3">方案3: 仅文字颜色</h3>
            <div className="space-y-2">
              <div className="flex items-center gap-4">
                <MemberNameWithStatus name="虞雨欣" isDead={false} showDot={false} />
                <span className="text-xs text-muted-foreground">在世 - 正常颜色</span>
              </div>
              <div className="flex items-center gap-4">
                <MemberNameWithStatus name="虞文昌" isDead={true} showDot={false} />
                <span className="text-xs text-muted-foreground">已故 - 浅色文字</span>
              </div>
            </div>
          </div>

          {/* 实际应用示例 */}
          <div>
            <h3 className="text-sm font-semibold mb-3">实际应用示例</h3>
            <div className="space-y-3">
              <Card className="p-3">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center">
                    <span className="text-xs">12月</span>
                    <span className="font-bold">5</span>
                  </div>
                  <div>
                    <p className="font-medium">
                      <MemberNameWithStatus name="虞国英" isDead={false} /> 诞辰
                    </p>
                    <p className="text-xs text-muted-foreground">第 2 世 · 100 年</p>
                  </div>
                </div>
              </Card>

              <Card className="p-3">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center">
                    <span className="text-xs">12月</span>
                    <span className="font-bold">8</span>
                  </div>
                  <div>
                    <p className="font-medium">
                      <MemberNameWithStatus name="林雅芳" isDead={true} /> 忌日
                    </p>
                    <p className="text-xs text-muted-foreground">第 2 世 · 33 年 · 已故</p>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}