import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  Grid,
  Italic,
  Palette,
  Type,
  Underline,
} from 'lucide-react'
import React from 'react'
import { Button } from 'shared/ui/button'
import { Separator } from 'shared/ui/separator'

export const FormattingToolbar: React.FC = () => (
  <div className="flex items-center gap-0.5 rounded-lg border bg-background p-0.5">
    <div className="flex items-center">
      {[Bold, Italic, Underline].map((Icon, i) => (
        <Button
          disabled
          key={i}
          variant="ghost"
          size="sm"
          className="h-6 w-6 rounded p-0"
        >
          <Icon className="h-3 w-3" />
        </Button>
      ))}
    </div>

    <Separator orientation="vertical" className="mx-0.5 h-4" />

    <div className="flex items-center">
      {[AlignLeft, AlignCenter, AlignRight].map((Icon, i) => (
        <Button
          disabled
          key={i}
          variant="ghost"
          size="sm"
          className="h-6 w-6 rounded p-0"
        >
          <Icon className="h-3 w-3" />
        </Button>
      ))}
    </div>

    <Separator orientation="vertical" className="mx-0.5 h-4" />

    <div className="flex items-center">
      {[Palette, Type, Grid].map((Icon, i) => (
        <Button
          disabled
          key={i}
          variant="ghost"
          size="sm"
          className="h-6 w-6 rounded p-0"
        >
          <Icon className="h-3 w-3" />
        </Button>
      ))}
    </div>
  </div>
)
