import {
  Card,
  CardHeader,
  CardContent,
  Avatar,
  Typography
} from "@mui/material";
import { useTranslation } from "react-i18next";
import SkillBar from "react-skillbars";

const serverTechnologies = [
  { type: "C#", level: 85 },
  { type: "ProxyKit", level: 25 },
  { type: "Let's_Encrypt", level: 10 },
  { type: "SQL Server", level: 15 },
  { type: "Docker", level: 5 }
];

const apiTechnologies = [
  { type: "C#", level: 90 },
  { type: "SQL Server", level: 10 },
  { type: "Docker", level: 5 }
];

const frontendTechnologies = [
  { type: "React", level: 75 },
  { type: "Redux", level: 15 },
  { type: "Javascript", level: 10 },
  { type: "Node.js", level: 5 },
  { type: "Docker", level: 5 }
];

const colors = {
  bar: "#5e8fff",
  title: {
    text: "#fd7e14",
    background: "#3f51b5"
  }
};

const TechnologiesComponent: React.FC = () => {
  const { t } = useTranslation();

  return (
    <Card>
      <CardHeader
        avatar={
          <Avatar 
            aria-label="recipe" 
            sx={{ 
              backgroundColor: 'primary.main' 
            }}
          >
            T
          </Avatar>
        }
        title={t("About.Technologies.Title")}
      />
      <CardContent>
        <Typography variant="body2" color="textSecondary" component="p">
          {t("About.Technologies.Content")}
        </Typography>
        <br />
        <Typography variant="h6" color="textSecondary">
          {t("System.Components.Server")}
        </Typography>
        <SkillBar skills={serverTechnologies} colors={colors} height={20} />
        <br />
        <Typography variant="h6" color="textSecondary">
          {t("System.Components.Api")}
        </Typography>
        <SkillBar skills={apiTechnologies} colors={colors} height={20} />
        <br />
        <Typography variant="h6" color="textSecondary">
          {t("System.Components.Frontend")}
        </Typography>
        <SkillBar skills={frontendTechnologies} colors={colors} height={20} />
      </CardContent>
    </Card>
  );
};

export default TechnologiesComponent;