"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

export function ForegroundExample() {
  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold">Foreground Color Examples</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Text with Foreground Color</CardTitle>
            <CardDescription>Examples of text using the new foreground color</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <p className="text-foreground-color mb-2">This text uses the foreground color</p>
              <p className="mb-2">This is regular text for comparison</p>
              <p className="text-muted-foreground mb-2">This is muted text for comparison</p>
            </div>

            <div className="flex flex-wrap gap-2">
              <Button variant="outline" className="text-foreground-color">
                Foreground Button Text
              </Button>
              <Button variant="outline">Regular Button Text</Button>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>UI Elements with Foreground Color</CardTitle>
            <CardDescription>Examples of UI elements using the foreground color</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-wrap gap-2">
              <div className="h-10 w-10 rounded bg-foreground-color"></div>
              <div className="h-10 w-10 rounded border-2 border-foreground-color"></div>
              <div className="h-10 w-10 rounded-full bg-foreground-color/20 flex items-center justify-center">
                <span className="text-foreground-color text-xs">20%</span>
              </div>
              <div className="h-10 w-10 rounded-full bg-foreground-color/50 flex items-center justify-center">
                <span className="text-white text-xs">50%</span>
              </div>
              <div className="h-10 w-10 rounded-full bg-foreground-color flex items-center justify-center">
                <span className="text-white text-xs">100%</span>
              </div>
            </div>

            <div className="flex flex-col gap-2">
              <div className="h-2 w-full bg-foreground-color/20 rounded-full overflow-hidden">
                <div className="h-full bg-foreground-color w-1/2 rounded-full"></div>
              </div>
              <div className="h-2 w-full bg-foreground-color/20 rounded-full overflow-hidden">
                <div className="h-full bg-foreground-color w-3/4 rounded-full"></div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}