import { FolderFocusOne } from "@icon-park/react";
import { Card, CardHeader, CardIcon, CardBody } from "../window/Card";

interface RoundedButtonProps {
  children?: React.ReactNode;
}

const RoundedButton = ({ children }: RoundedButtonProps) => {
  return (
    <button className="flex items-center justify-center px-3 py-1 transition rounded-full min-w-fit active:scale-95 hover:bg-black/10 text-zinc-700 bg-black/5">
      {children}
    </button>
  );
};

const CommonDir = () => {
  return (
    <Card>
      <CardHeader>
        <CardIcon>
          <FolderFocusOne /> 常用目录
        </CardIcon>
      </CardHeader>
      <CardBody>
        <div className="flex gap-2.5">
          <RoundedButton>Steam安装位置</RoundedButton>
          <RoundedButton>CS2游戏目录</RoundedButton>
          <RoundedButton>地图文件</RoundedButton>
          <RoundedButton>游戏CFG目录</RoundedButton>
          <RoundedButton>个人CFG目录</RoundedButton>
          <RoundedButton>完美平台录像</RoundedButton>
          <RoundedButton>5E平台录像</RoundedButton>
        </div>
      </CardBody>
    </Card>
  );
};

export default CommonDir;
