import { Session } from "../types/Session";
import ChevronRightIcon from "./icons/ChevronRightIcon";
import FilledHomeIcon from "./icons/FilledHomeIcon";

interface SessionFilesProps {
  files: { filename: string; size: number }[];
  session: Session;
}

function SessionFiles({ files, session }: SessionFilesProps) {
  return (
    <div>
      {files.map((file) => (
        <SessionFile
          {...file}
          key={file.filename}
          link={`http://${session.server.ipAddress}:3001/files/${
            session.app.fileName
          }/${new Date(session.createdAt).getTime()}/${file.filename}`}
        />
      ))}
    </div>
  );
}

export default SessionFiles;

export function SessionFile({
  link,
  filename,
  size,
}: {
  link: string;
  filename: string;
  size: number;
}) {
  return (
    <a
      href={link}
      target="_blank"
      className="flex gap-[0.833vw] items-center px-[0.833vw] py-[0.556vw]"
    >
      <div className="p-[0.972vw] bg-[#F6F6F6] rounded-[0.556vw]">
        <div className="size-[1.389vw] text-[#7D7D7D]">
          <FilledHomeIcon />
        </div>
      </div>
      <div className="space-y-[0.278vw] flex-1">
        <p className="button-m font-medium">{filename}</p>
        <p className="text-[#BDBDBD] caption-s font-medium">{size}</p>
      </div>
      <span className="size-[1.389vw] text-[#7D7D7D]">
        <ChevronRightIcon />
      </span>
    </a>
  );
}