Icon Tile

"use client"

import {
  BellIcon,
  BluetoothIcon,
  HandIcon,
  HourglassIcon,
  MoonIcon,
  SettingsIcon,
  Volume2Icon,
  WifiIcon,
} from "lucide-react"

import { IconTile } from "@/components/ui/icon-tile"

const tiles = [
  { label: "Wi-Fi", icon: WifiIcon, color: "blue" },
  { label: "Bluetooth", icon: BluetoothIcon, color: "blue" },
  { label: "General", icon: SettingsIcon, color: "gray" },
  { label: "Notifications", icon: BellIcon, color: "red" },
  { label: "Sound", icon: Volume2Icon, color: "pink" },
  { label: "Focus", icon: MoonIcon, color: "indigo" },
  { label: "Screen Time", icon: HourglassIcon, color: "indigo" },
  { label: "Privacy & Security", icon: HandIcon, color: "blue" },
] as const

export default function IconTileDemo() {
  return (
    <div className="grid grid-cols-2 gap-x-8 gap-y-3">
      {tiles.map((tile) => (
        <div key={tile.label} className="flex items-center gap-2 text-mac-body">
          <IconTile color={tile.color}>
            <tile.icon strokeWidth={2} />
          </IconTile>
          {tile.label}
        </div>
      ))}
    </div>
  )
}