import {
  Button,
  ButtonGroup,
  Card,
  CardHeader,
  Badge,
  Alert,
  Heading,
} from '@skedulo/breeze-ui-react'

export default function ExampleWeatherContent() {
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      {/* Current weather */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between w-full">
            <div>
              <Heading level={3}>Weather</Heading>
              <p className="text-sm text-gray-500">
                333 Bush St, San Francisco, CA
              </p>
            </div>
            <ButtonGroup>
              <Button compact>°C</Button>
              <Button compact color="transparent">
                °F
              </Button>
            </ButtonGroup>
          </div>
        </CardHeader>
        <div className="p-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div className="col-span-2 md:col-span-1">
              <div className="flex items-center gap-3">
                <span className="text-4xl">☀️</span>
                <div>
                  <div className="text-4xl font-bold text-gray-900">12°C</div>
                  <div className="text-sm text-gray-500">Clear sky</div>
                </div>
              </div>
            </div>

            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <Badge color="blue">Wind</Badge> 21 km/h
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <Badge color="blue">Visibility</Badge> 13 km
              </div>
            </div>

            <div className="space-y-2">
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <Badge color="blue">Humidity</Badge> 93%
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <Badge color="blue">Pressure</Badge> 1015 hPa
              </div>
            </div>

            <Alert color="warning">
              <strong>MODERATE FIRE DANGER</strong>
              <br />
              Heightened fire conditions
            </Alert>
          </div>
        </div>
      </Card>

      {/* Forecast */}
      <Card>
        <CardHeader>
          <Heading level={4}>10-Day Forecast</Heading>
        </CardHeader>
        <div className="p-6">
          <div className="grid grid-cols-5 md:grid-cols-10 gap-3">
            {[
              { day: 'Today', icon: '⛅', high: 16, low: 9 },
              { day: 'Tmrw', icon: '⛅', high: 18, low: 10 },
              { day: 'Thu', icon: '☀️', high: 18, low: 9 },
              { day: 'Fri', icon: '☀️', high: 20, low: 10 },
              { day: 'Sat', icon: '⛅', high: 21, low: 12 },
              { day: 'Sun', icon: '⛅', high: 21, low: 12 },
              { day: 'Mon', icon: '⛅', high: 22, low: 13 },
              { day: 'Tue', icon: '⛅', high: 20, low: 12 },
              { day: 'Wed', icon: '☀️', high: 23, low: 13 },
              { day: 'Thu', icon: '☀️', high: 18, low: 11 },
            ].map((day, i) => (
              <div key={i} className="text-center">
                <div className="text-xs font-medium text-gray-500 mb-1">
                  {day.day}
                </div>
                <div className="text-xl mb-1">{day.icon}</div>
                <div className="text-sm font-semibold text-gray-900">
                  {day.high}°
                </div>
                <div className="text-xs text-gray-400">{day.low}°</div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  )
}
Weather Component
