import "./ReportInfo.scss";
import Image from "next/image";
import RoadType from "@/Entities/RoadType/RoadType";
import HeaderText from "@/Shared/UI/HeaderText/HeaderText";
import ReportLike from "@/Features/ReportLike/ReportLike";
import calendar_icon from "./icons/calendar-icon.svg";
import map_pin_icon from "./icons/map-pin.svg";
import {
  ROAD_TYPES,
  ROAD_TYPES_COLORS,
} from "@/Shared/variables/road-types";

interface IAuthor {
  id: number;
  first_name: string;
  last_name: string;
  govern_status: any;
}

interface ILocation {
  id: number;
  latitude: string;
  longitude: string;
  address: string;
}

interface IReportInfoProps {
  description: string | undefined;
  date: string | undefined;
  category: number | undefined;
  count_likes: number | undefined;
  author: IAuthor | undefined;
  location: ILocation[] | undefined;
}

const ReportInfo: React.FC<IReportInfoProps> = ({
  description,
  date,
  category = 1,
  count_likes,
  author,
  location = [],
}: IReportInfoProps) => {
  const months: Record<string, string> = {
    "01": "Январь",
    "02": "Февраль",
    "03": "Март",
    "04": "Апрель",
    "05": "Май",
    "06": "Июнь",
    "07": "Июль",
    "08": "Август",
    "09": "Сентябрь",
    "10": "Октябрь",
    "11": "Ноябрь",
    "12": "Декабрь",
  };

  const year = date?.slice(0, 4);
  const month = date?.slice(5, 7);
  const day = date?.slice(8, 10);
  return (
    <div className="report-info">
      <RoadType color={ROAD_TYPES_COLORS[category]}>
        {ROAD_TYPES[category]}
      </RoadType>
      <HeaderText>{location[0].address}</HeaderText>

      <div className="report-info__date-and-likes">
        <div className="report-info__date">
          <Image src={calendar_icon} alt="Calendar Icon" />
          {day} {months[month!]}, {year}
        </div>
        <ReportLike count_likes={count_likes!} />
      </div>

      <p>{description}</p>

      <h5>
        Автор обращения:{" "}
        <span>
          {author?.first_name}. {author?.last_name.slice(0, 1)}
        </span>
      </h5>

      <button className="report-info__show-map">
        <Image src={map_pin_icon} alt="Map Pin Icon" />
        <span>Показать на карте</span>
      </button>
    </div>
  );
};

export default ReportInfo;
